PDA

View Full Version : Fade in / switch image / fade out functionality not firing at correct time



tk403
04-26-2010, 01:33 PM
Hello all, I have a script that runs a slideshow of images by fading out the current image, changing the image attributes (src and alt), then fading back in. It works fine on localhost, but when I put it up on the production environment sometimes the old image will fade in, then quickly switch to the new one after fade in has completed. Any suggestions?



$(document).ready(function() {



var images = [
'slide-01.jpg',
'slide-02.jpg',
'slide-03.jpg',
'slide-04.jpg',
'slide-05.jpg',
'slide-06.jpg',
'slide-07.jpg',
'slide-08.jpg',
'slide-09.jpg',
'slide-10.jpg',
'slide-11.jpg',
'slide-12.jpg',
'slide-13.jpg',
'slide-14.jpg',
'slide-15.jpg',
'slide-16.jpg'
];

var imageNames = [
'Image 1',
'Image 2',
'Image 3',
'Image 4',
'Image 5',
'Image 6',
'Image 7',
'Image 8',
'Image 9',
'Image 10',
'Image 11',
'Image 12',
'Image 13',
'Image 14',
'Image 15',
'Image 16'
];



function switchAndAppear(elem, i) {

i == images.length - 1 ? i = 0 : i++;

$(elem)
.attr({
"src": 'images/slideshow/' + images[i],
"alt": imageNames[i]
})
.fadeIn(1000, function() {
disappear(this, i);
});

}



function disappear(elem, i) {

setTimeout(
function() {
$(elem).fadeOut(1000, function() {
switchAndAppear(this, i);
});
}, 7000);

}



// set random initial slideshow image
var p = Math.floor(Math.random() * (images.length + 1));

$("#gallery-image")
.attr({
"src" : 'images/slideshow/' + images[p],
"alt" : imageNames[p]
});



// start slideshow
$("#gallery-image").delay(4000).fadeOut(1000, function() {
switchAndAppear(this, 0);
});



});

MJH
04-26-2010, 02:11 PM
See:

http://www.dynamicdrive.com/forums/showpost.php?p=224998&postcount=2

vwphillips
04-26-2010, 04:06 PM
your images will take time to load, the images may need to be preloaded

tk403
04-26-2010, 04:51 PM
Thanks that's definitely the problem, just need to preload the images. Much obliged!