I am building a jQuery slide show for client and it is working perfectly in all browsers except Firefox (using 3.6.13). What is happening is Firefox is resetting the width and height to the next images variables but still showing the old image for a split second, then it shows the new image.
I have trying using .hide() both before the new image is set up and chained and it acts the same way … it also seems to get worse the more images the slide show goes through.
Here’s the code:
function runSlideShow() {
if (current_index != slideshow_images.length - 1) {
$('#sl_stroke').css({
width: function() {
return parseInt(big_image_widths[current_index + 1]) + 8;
},
height: function() {
return parseInt(big_image_heights[current_index + 1]) + 8;
},
'margin-top' : '20px'
});
$('#slide_image').hide().attr({
src: function() {
return slideshow_images[current_index + 1];
},
width: function() {
return big_image_widths[current_index + 1];
},
height: function() {
return big_image_heights[current_index + 1];
}
}).fadeIn('slow');
$('#im_desc').html(function() {
return image_descriptions[current_index + 1];
});
current_index++;
}
else {
clearInterval(refreshId);
}
}
This function is called from another function like this:
refreshId = setInterval(function() {
runSlideShow();
}, getInterval());
Ignore the code for #sl_stroke and #im_desc … that is for other things but I wanted people to be able to see the entire function
Also this is being tested locally so there’s no lag time for downloading images, as I said I have tested it in IE, Chrome, Opera and Safari and it works flawlessly
Oh and for those of you that are bound to say ‘use one of the existing slide show scripts’ no, every stinking one of them uses a list of images, causing massive load times and I don’t want that.