Question

Basically I need the thumbnails to rotate every time the user hovers over an image. Here is my failed attempt:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {

       $('img').hover(function() {

            theImage = $(this).attr('id');
            otherImages = $(this).attr('class').split('@');
            rotateThumbs(otherImages, theImage);

       }, function() {
           //
       });

    });

    function rotateThumbs(otherImages, theImage) {

        for (i=0; i < otherImages.length; i++) {
            setInterval($('#'+theImage).attr('src', otherImages[i]), 1000);
        }

    }
</script>

<img id="myImage" src="http://www.google.com/images/logos/ps_logo2.png" class="http://www.google.com/images/logos/ps_logo2.png@http://l.yimg.com/a/i/ww/met/yahoo_logo_us_061509.png@http://dogandcat.com/images/cat2.jpg" width="174" height="130"  />

Does anyone know how this may be accomplished?

Answer 1

Some issues here.

1. setInterval requires a function reference as it’s first argument, but you are executing code that returns a jQuery object.
2. setInterval executes the first function repeatedly at the specified interval. Is that what you are trying to do? Swap images every second?
3. Depending on how you correct the first issue, you could run into an issue where i is otherImages.length and thus the src is set to undefined.
4. Assuming you worked around issue 3, you will have the problem that the image swaps will happen imperceptibly fast and it will appear as though the last image is always displayed.

Instead, don’t use a loop. Increment a counter each time a new image is displayed. Try this:

function rotateThumbs(otherImages, theImage) {
    var i = 0;
    var interval = setInterval(function() {
        $('#'+theImage).attr('src', otherImages[i++]);
        if (i >= otherImages.length) {
            clearInterval(interval);
        }
    }, 1000);
}