jquery 1.4.1 breaks my slideshow

Question

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>

Answer 1

It's because how your function is scoped - assign it a variable like this:

var randImgs = function() {
  // do stuff
}

now your setInterval has a reference to the correct function.

As a quick note: div#slideshow (or any tag/id combo) is un-efficient. The ID is meant ONLY for that element so saying "look at all the divs and find the id of.." is unnecessary.

Use that approach, however, with classes such as div.myClassName - to say 'look at all the divs and find the class..'.

Same goes with parent/child - #parent #child - is extra work - #child can be found by itself. #parent div.myClassName however would be sensible, as that helps narrow the search for the divs with classname of myClassname.

Answer 2

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!