In this tutorial we will help you to build beautiful homepages with slideshows for your websites. This will let you to have a jQuery powered slideshow on the home page with random effects. We are using the famous Nivoslider plugin for this. The main thing we want to highlight is the lazyload image option integrating with nivoslider, which will help you to save bandwidth and make the webpages load faster when you have a lot of images in the slideshow.
Take a look at the nivoslider demo here.
How to install the Nivoslider slideshow?
Get a copy of the nivoslider plugin from here.
To use the Nivo Slider you have to include the following in your page:
- jQuery
- Nivo Slider script
- Nivo Slider CSS
Add the following code to the header section of your webpage
<!-- Usually in the <head> section --> <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
Inside the body section of your webpage where you need the slideshow to appear, add the following code
<!-- Then somewhere in the <body> section -->
<div id="slider" class="nivoSlider">
<img src="images/slide1.jpg" alt="" />
<a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
<img src="images/slide4.jpg" alt="" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
You can add a caption to an image by simply adding a title attribute to the image. To add an HTML Caption simply set the title attribute to the ID of a element that contains your caption (prefixed with a hash). Note that the HTML element that contains your caption must have the CSS class nivo-html-caption applied and must be outside of the slider div.
Then it helps to add some CSS to make the slider look good while it’s loading:
.nivoSlider {
position:relative;
width:618px; /* Change this to your images width */
height:246px; /* Change this to your images height */
background:url(images/loading.gif) no-repeat 50% 50%;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}
That finishes the installation. Now we need to trigger it on page load and start the slider. Add the following code to your webpage
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Nivoslider has a lot of optional parameters which will help you to configure it the way you want. Here is the information on how to configure it.
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: true, // Only show on hover
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
The effect parameter can be any of the following:
- sliceDown
- sliceDownLeft
- sliceUp
- sliceUpLeft
- sliceUpDown
- sliceUpDownLeft
- fold
- fade
- random
- slideInRight
- slideInLeft
- boxRandom
- boxRain
- boxRainReverse
- boxRainGrow
- boxRainGrowReverse
That finishes the basic installation and setting up of Nivoslider for your webpage.
How to load the nivoslider with lazyloading integrated?
There is a fork of nivoslider available which will help you to lazyload the images and there by save the page load time and your bandwidths. This will be helpful for you in the following situations when you have.
- Dozens of images in the slideshow
- Very large images
- Mobile environments
- Low bandwidths allowed
To implement it, Get the download package from here. Replace your nivolibrary with the library included in this package and with a singe change to the image path, you can make the images lazyloaded.
Before:
<img src="my-image.jpg" alt="" title="Caption for my image.">
After:
<img data-src="my-image.jpg" alt="" title="Caption for my image." src="blank.gif">
it’s highly recommended to include a src to small placeholder image (blank.gif) for valid HTML markup. (And for non-javascript users).
Demo of the gallery with lazyload.
Tags: ajax home page slideshow, ajax slideshow, homepage slideshow, how to create a slideshow in home page, image slideshow, jquery slideshow, nivoslider help, random image slideshow, slideshow
hi, I have a problem with the .js. It tell me that :
Uncaught TypeError: Object [object Object] has no method ‘live’
I see you call it 2 or 3 times, but never declare, so I don’t know if I have to load an other .js or anything.
thanks you
Its because you may be using a new version of jQuery. The live() API is deprecated http://api.jquery.com/live/
Hi,
Could you pls explain how can we have images from SharePoint list shown in slideshow in NivoSlider.
Hi !
.
Thank you for this article , it was exactly what i was looking for …. BUT
It seems , that you loose the responsive aspect of the NivoSlider !!
I have tryed to fixe it with CSS, without succed .
Have you any idea or suggestion ?
I haven’t tested the responsive part of nivoslider with this fix. If you are looking for a responsive jquery slider, my recommendation is to use http://www.basic-slider.com