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
JavaScript:
-
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;
-
}
This does not seem to work in versions of IE8 and earlier.
i try out this tutorial but it doesn’t work in IE
nice
It looks impressive, I would try to use on my website.
Nice.
But why the heck does it always need to be an ???
I just don’t get it.
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
Hi you,
Very good your post. Congrats!
Please, one more tip…
How can I control the position to show the image?
Thanks, best
Daniel
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?
its not working.i dont know where the problem occurred.
simple..and easy script