After toying with the jquery slideshow extension, I created my own that better suited my purposes ( I didn't like that all the images needed to load at the beginning for instance). Now, upon upgrading to jQuery 1.4.2 (I know I'm late), the slideshow loads the first image fine ( from the line$('div#slideshow img#ssone').fadeIn(1500); towards the bottom), but doesn't do anything beyond that. Does anyone have any idea which jquery construct is killing my script? The live page is at lplonline.org which is using 1.3.2 for the time being. Thanks in advance.
Array.prototype.random = function( r ) {
var i = 0, l = this.length;
if( !r ) { r = this.length; }
else if( r > 0 ) { r = r % l; }
else { i = r; r = l + r % l; }
return this[ Math.floor( r * Math.random() - i ) ];
};
jQuery(function($){
var imgArr = new Array();
imgArr[1] = "wp-content/uploads/rotator/Brbrshop4-hrmnywkshp72006.jpg";
imgArr[2] = "wp-content/uploads/rotator/IMGA0125.JPG";
//etc, etc, about 30 of these are created dynamically from a db
function randImgs () {
var randImg = imgArr.random();
var img1 = $('div#slideshow img#ssone');
var img2 = $('div#slideshow img#sstwo');
if(img1.is(':visible') ) {
img2.fadeIn(1500);
img1.fadeOut(1500,function() {
img1.attr({src : randImg});
});
} else {
img1.fadeIn(1500);
img2.fadeOut(1500,function() {
img2.attr({src : randImg});
});
}
}
setInterval(randImgs,9000); // 9 SECONDS
$('div#slideshow img#ssone').fadeIn(1500);
});
</script>
<div id="slideshow">
<img id="ssone" style="display:none;" src="wp-content/uploads/rotator/quote-investments.png" alt="" />
<img id="sstwo" style="display:none;" src="wp-content/uploads/rotator/quote-drugs.png" alt="" />
</div>
