Search code examples
jqueryslideshowjquery-1.4

jquery 1.4.1 breaks my slideshow


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

var randImgs = function () {

    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>

Solution

  • Aha! I've inherited this website, and it seems that the original creator of the site called about 3 or 4 different js libraries (scriptalicious, prototype...) in the header. None of them were actually being used though. I took all of that cruft out, and now it works beautifully, so the problem was somehow in the interaction between jQuery and one of the other libraries. Thank you Dan Heberden for your time and advice in any case!