Simple jquery Fade Slideshow fails on certain browsers
- by cmay
So I have a simple slideshow on my website which just shows one image then shows another until it reaches the end or the user hits skip in which case it shows index.html. The site is served on apache2 with Django. The slideshow works perfectly on most machines, but certain machines it shows some images twice and other images not at all and the timing is off. I am using jquery 1.4.3.
Below is the section of html where I push the image urls from the database to the javascript
{% for image in latest_images %}
{% thumbnail image.image_file "800x600" crop="center" as im %}
<script>FadeImageList.push("{{im.url}}");</script>
{% endthumbnail %}
{% endfor %}
Below is the full javascript file
var FadeImageList = [];
var fadeDuration = 2000;
var fadeImgID = '#slideShow';
var homePageID = '#homePage';
var menuID = '#menu';
var skipFlag = 0;
$(document).ready(function(){
$(homePageID).fadeOut(50);
PlaySlideshow(FadeImageList);
});
var PlaySlideshow = function(FadeImageList){
var newImgSrc = FadeImageList.shift();
$('#skip').click(function(){$('#loader').show();skipFlag = 1;});
if(((typeof(newImgSrc) !== "string") || (skipFlag === 1))){
EndSlideShow();
return;
}
else{
$(fadeImgID).fadeOut(fadeDuration,function(){
$(fadeImgID).attr('src', newImgSrc);
$(fadeImgID).fadeIn(fadeDuration,function(){
PlaySlideshow(FadeImageList);
});
});
}
};
var EndSlideShow = function(fadeSettings){
$(fadeImgID).fadeOut(400,function(){
$(homePageID).fadeIn(400);
$("#skip").fadeOut(400);
$('#loader').hide();
});
};
The strange thing is I've had it work and fail on identically version numbered browsers on the same os but on different machines. It consistently either works or fails on a machine.
I've had it fail in ie 7,8 firefox 3.6.3 and chrome. I've also had it succeed in ie6,7,8 firefox 3.6.3,3.4.2,3.1 and chrome.
