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