jQuery simple image fade in/out slideshow

The fallowing example shows how to make slideshow of images with fade in/out nice smooth transition. jQuery makes everything easy.
Note that all images are defined at the start(they will load all together from the beginning) and while this will work for small amount of images it might be wrong solution for gallery of 10 images or more.
Example also uses corner jQuery plugin to round image corners.

open slideshow frame in new window
[JS]
var fadeDuration=2000;
var slideDuration=4000;
var currentIndex=1;
var nextIndex=1;
$(document).ready(function()
{
$(‘ul.slideshow li img’).corner();
$(‘ul.slideshow li’).css({opacity: 0.0});
$(“‘ul.slideshow li:nth-child(“+nextIndex+”)'”).addClass(‘show’).animate({opacity: 1.0}, fadeDuration);
var timer = setInterval(‘nextSlide()’,slideDuration);
})

function nextSlide(){
nextIndex =currentIndex+1;
if(nextIndex > $(‘ul.slideshow li’).length)
{
nextIndex =1;
}
$(“‘ul.slideshow li:nth-child(“+nextIndex+”)'”).addClass(‘show’).animate({opacity: 1.0}, fadeDuration);
$(“‘ul.slideshow li:nth-child(“+currentIndex+”)'”).animate({opacity: 0.0}, fadeDuration).removeClass(‘show’);
currentIndex = nextIndex;
}

[/JS]

Bookmark and Share

16 thoughts on “jQuery simple image fade in/out slideshow

  1. NaN

    Sorry, the above comment contains the html tag of an unordered list. I thought that this will be masked by the software. Anyway, what i was trying to say was: “why does it always need to be an unordered list?”

    Most faders/sliders/whatever are restricted to certain html elements only (in the most cases unordered lists – what is not always the best element when it comes to semantics). Why? There is no need for this. Just use classnames instead. I just don’t want to write html for javascripts. It should be the other way. Write a script that can be used by any html structure.

    Anyway … nice and easy script without the overhead of a huge effects libary where you just need one simple fade effect.

    cheers

  2. Daniel

    Hi you,

    Very good your post. Congrats!

    Please, one more tip…

    How can I control the position to show the image?

    Thanks, best

    Daniel

  3. h2h

    I have this script working great, until it gets to the last image… it isn’t cycling back to the first image right away, just fading to nothing.
    Any ideas on why this would happen?

  4. nancy

    This script doesn’t work in IE* and earlier.
    works fine on chrome.
    any updates to make it work in IE ????????????

  5. uday

    I have this script working great, until it gets to the last image… it isn’t cycling back to the first image right away, just fading to nothing.
    Any ideas on why this would happen?

  6. Joel

    Hi, for some reason, when i insert the js i get an error on line 13 ‘{$(‘ul.slideshow li img’).corner();’ can someone help?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>