CODEWITHSUNDEEP
jquerythumbnails
Milan Milosevic
Milan Milosevic

Reputation: 433

jQuery image rotate on hover

Any chance to change image src on hover , count up to 10 and back again from first?

This is what i need, this is default thumb, flv-3.jpg!

<img src="/thumbs/e/b/d/6/d/ebd6d2d6d99e/ebd6d2d6d99e.flv-3.jpg" />

On mouse hover need to change only number

up to 10, and back again back and start from number 1, but when i move mouse from thumbs need to back to default thumb flv-3.jpg

This what im use now but its not very good solutions,

var _thumbs = new Array();
function changeThumb(index, i, num_thumbs, path)
{
    if (_thumbs[index])
    {         
        document.getElementById(index).src = path + i + ".jpg";

        preload = new Image();
        preload_image_id = (i + 1 > num_thumbs) ? 1 : i + 1;
        preload.src = path + preload_image_id + ".jpg";
        i = i % num_thumbs;
        i++;
        setTimeout("changeThumb('" + index + "'," + i + ", " + num_thumbs + ", '" + path + "')", 800)
    }
}    
function startThumbChange(index, num_thumbs, path)
{    
    if (num_thumbs < 2) return false;
    _thumbs[index] = true;
    changeThumb(index, 1, num_thumbs, path);
}
function endThumbChange(index, image)
{
    _thumbs[index] = false;
    document.getElementById(index).src = image;
}

and html

<img onmouseout="endThumbChange('515e9279d96c6', '/thumbs/e/b/d/6/d/ebd6d2d6d99e/ebd6d2d6d99e.flv-3.jpg');" onmouseover="startThumbChange('515e9279d96c6', '10', '/thumbs/e/b/d/6/d/ebd6d2d6d99e/ebd6d2d6d99e.flv-','.jpg');" id="515e9279d96c6" src="/thumbs/e/b/d/6/d/ebd6d2d6d99e/ebd6d2d6d99e.flv-3.jpg" class="img">

And also its possible to add effect like fade when thumbs is changed?

Upvotes: 0

Views: 1282

Answers (1)

user2248351
user2248351

Reputation:

var timer;

$('div.settingsButton').hover(function() {

var angle = 0,
    $this = $(this);

timer = setInterval(function() {
    angle += 4;
    $this.rotate(angle);
}, 50);
},
function() {

timer && clearInterval(timer);
$(this).rotate(0);

here the fiddle

Upvotes: 1

Related Questions