CODEWITHSUNDEEP
jqueryimagethumbnails
Gerben
Gerben

Reputation: 61

Getting back to first image when removing mouse-over

I have this script which allows a list of thumbs to rotate when you hover your mouse over the image (which is very cool btw!)

You can check the code over here and play around with it:

http://jsfiddle.net/vfpK4/36/

I actually want the images to get back to the first image when I move the mouse away, however I am really no so familiar with jQuery, is there anyone who can adjust the code a bit? (probably very easy, but still too hard for me)

Upvotes: 0

Views: 118

Answers (1)

j08691
j08691

Reputation: 207973

Like this: jsFiddle example.

You can just set a variable to store the original image source, then feed it back to the image on mouseout.

jQuery:

var intervalId;
var first = $('img').attr('src'); 
$('img').hover(function() {
    var $img = $(this),
        imageList = $img.attr('class').split('@');
    // start the rotation
    intervalId = window.setInterval(function() {
        // cycle array
        imageList.unshift(imageList.pop());
        $img.attr('src', imageList[0]);
    }, 500);
}, function() {
    // stop the cycle
    intervalId = window.clearInterval(intervalId);
    $('img').attr('src', first);
});

Upvotes: 1

Related Questions