使用鼠标悬停在另一个div中的图像上缩放图像

Question

There is many plugins for zooming image (like jqzoom ). But I want to zoom image with hovering on image in another div:

Is there any way to have an effect like jqzoom (inner zoom)but with mouseover on another element? I want this effect : seavello.com/r/zoom/zoom.html, but with mouseover on thumbnial not main image Thanks in advance

Answer 1

try this

$(document).ready(function(){
    $('img').hover(
        function () { 
            $(this).animate({width: '+=10', height: '+=10'}, 500);
        },
        function () {
            $(this).animate({width: '-=10', height: '-=10'}, 500);
    });
}); 

Answer 2

If the href is url for big image then:

var big = $('.main img');
$('.tumb').mouseover(function() {
   big.attr('src', $(this).attr('href'));
}).mouseout(function() {
   big.attr('src', '');
});

you can also preload images on start.

var images = $.map($('.tumb'), function(item, index) {
   var img = new Image();
   img.src = item.attr('href');
   return img;
});

You can also add animations on hover.