Simple Image SlideShow using jQuery




I have seen a lot of users requesting for simple jQuery scripts for SlideShows. I saw a couple of them, but the scripts assumed that the number of image tags has to be fixed beforehand.

The code given below is taken from my eBook “51 Recipes with jQuery and ASP.NET Controls”.

Note: This code was written when jQuery 1.3.2 was the latest version available. Currently we have jQuery 1.4.2 available.

<html xmlns="http://www.w3.org/1999/xhtml">
<
head id="Head1" runat="server">
<
title>Simple Image SlideShow</title>
<
link href="../CSS/Demos.css" rel="stylesheet" type="text/css" />
<
script type='text/javascript'
src='../Scripts/jquery-1.3.2.min.js'>
</
script>

<
script type="text/javascript">
$(function() {

var imgs = [
'../images/1.jpg',
'../images/2.jpg',
'../images/3.jpg',
'../images/4.jpg'];
var cnt = imgs.length;

var $imageSlide = $('img[id$=imageSlide]');
// set the image control to the last image
$imageSlide.attr('src', imgs[cnt-1]);

setInterval(Slider, 3000);

function Slider() {
$imageSlide.fadeOut("slow", function() {
$(this).attr('src', imgs[(imgs.length++) % cnt])
.fadeIn("slow");
});
}
});

</script>

</
head>
<
body>
<
form id="form1" runat="server">
<
div class="smallDiv">
<
h2>Image Slide Show - Image Changes Every 3 Seconds</h2><br />
<
asp:Image ID="imageSlide" runat="server" class="imgdiv" />
</
div>
</
form>
</
body>
</
html>


This recipe shows you how to create a simple image slideshow that works in modern browsers. This example starts by declaring an array containing image paths. We have declared an image control on the page. When the page loads, the image path of this control is set to the last element of the array. I will explain shortly why this is needed.

var $imageSlide = $('img[id$=imageSlide]');
// set the image control to the last image
$imageSlide.attr('src', imgs[cnt-1]);

We then use the JavaScript setInterval() function which delays execution of the Slider function for a specific time, in our case 3000 millisecond(3 seconds). The advantage of a setInterval() function is that it continues to repeat the process of triggering the function at a specified interval, thereby sliding the images in a cycle. If you want to pause the slideshow, use the clearInterval() function.

Note: Since the Slider function is first called after a 3 seconds delay, hence we explicitly set the image control source to the last image path in the array. If we do not do so, the user does not see an image for the first 3 seconds.

With every loop, we set the image control source to the next element in the array using the expression imgs[(imgs.length++) % cnt] and apply the fadeIn() and fadeOut() effect.

function Slider() {
$imageSlide.fadeOut("slow", function() {
$(this).attr('src', imgs[(imgs.length++) % cnt])
.fadeIn("slow");
});
}

See a Live Demo



Will you give this article a +1 ? Thanks in advance




About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

9 Responses to "Simple Image SlideShow using jQuery"
  1. Bob said...
    March 25, 2010 at 2:23 PM

    I think this is the right idea. I have not tested, the following comments.

    1. The call to imgs.length++ will increment this value every 3 seconds. You will lose the intent of the variable. Seems like you want to have a copy (var index = imgs.length for instance) and then increment that variable.

    2. The setInterval option does not take into consideration the load time of the images. If for example, it takes 2.5 seconds to load, then the image will be shown for 0.5 seconds. This will occur during the initial caching of the images.

  2. Anonymous said...
    March 29, 2010 at 2:08 AM

    I think you have a bug here.

    I'm using Firefox 3.5.8.

    When I open live demo for the first time (images not cached) when fade in occures it shows old picture for a short time.

  3. Suprotim Agarwal said...
    March 30, 2010 at 9:15 AM

    I wouldn't call it a bug. In the book, I have mentioned a plugin that caches images before it can be used, and yes as you suggest, that's the way to go. My intention here was to focus on creating a simple image slide show.

  4. Host Gator Coupons said...
    April 2, 2010 at 3:53 AM

    I saw a couple of them, but the scripts assumed that the number of image tags has to be fixed beforehand.

  5. Approaching Women said...
    October 26, 2010 at 11:34 AM

    I am very grateful for this article. Have a website in need of an article and time to digest this script. Thanks Devcurry!

  6. Anonymous said...
    December 15, 2010 at 1:40 AM

    Not working properly

  7. Anonymous said...
    September 12, 2011 at 8:01 PM

    Tried this on my site, then I realized that with each picture fade it acts like it's refreshing the page, and scrolls to the top of the page.

    Anybody know how to stop it?

  8. Manuel said...
    September 12, 2011 at 11:31 PM

    Preload the images to stop refresh like behavior

    function preload(arr) {
    $(arr).each(function(){
    $('img/>')[0].src = this;
    });
    }


    preload([
    'img/1.jpg',
    'img/2.jpg',
    'img/3.jpg'
    ]);

  9. Anonymous said...
    April 18, 2012 at 10:43 PM

    How do I stop the slideshow at the last slide?

 

Copyright © 2009-2014 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions