Home > Blog > Beautiful jQuery home page slideshow with translations
Request quote

Beautiful jQuery home page slideshow with translations

Posted on: January 21st, 2012 by Raez Mon No Comments

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.

Nivoslider screenshot

 

 

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: , , , , , , , ,