here is the code,
var images2 = ['images/index_19.jpg', 'images/details_10.jpg', 'images/index_23.jpg'];
$(document).ready(function()
{
setInterval(forwardImage2, 4000);
//This function will find the key for the current Image
function currentImageKey2() {
i = jQuery.inArray($('#slideshow2').attr('src'), images2);
return i;
}
//This function will move the slideshow forward one
function forwardImage2()
{
currentImageKey2();
if (i < images2.length - 1)
{
changeImage2(i + 1);
}else
{
changeImage2(0);
}
}
//This function will change to image to whatever the variable i passes to it
function changeImage2(i) {
$('#slideshow2').stop().animate({
opacity: 0,
}, 200, function() {
$('#slideshow2').attr('src', images2[i]);
$('#holder img').load(function() {
$('#slideshow2').stop().animate({
opacity: 1,
}, 200)
})
})
}
});
</script>
this code works for IE, FF, and GC, there is only slight glitching in them and they run it perfectly after the first pass through, however with safari, the same photokeeps showing over and over again, i have seen it change after a long period of watching it, but I need it to run properly from the beginning, any ideas? also here is the calling HTML
<td colspan="7" rowspan="12">
<div id="holder2">
<img src="images/shield.jpg" id="slideshow2" border = "0" />
</div>
</td>
Thanks in advance.