用jQuery放大图像

Question

我一直在搜索这两个站点中用于全屏图像查看的插件：

• 产品变焦示例1
• 产品变焦示例2

我正在寻找一个类似的jQuery模块(或教程)。请注意，我指的是当您单击产品图像时的全屏图片，而不是鼠标在图像上方时的"CloudZoom“功能。我目前正在使用CloudZoom中广泛使用的Lightbox模块，但是由Lightbox加载的图像非常大(因为href指向一个大图像，用于CloudZoom缩放)。

这里我需要的是一个使用整个浏览器大小的图像(不大于当前浏览器，因为lightbox创建了一个不透明的黑色背景，只占浏览器的高度)。如果我的图像更大，用户可以向下滚动，但是灯光盒的黑暗背景不会填满页面)。

非常感谢你的帮助

Answer 1

这是一个链接，您可以在其中获得图像变焦插件，这可能对您有帮助。

如您的示例2所示，变焦效应插件

更新：

这是jQuery 全屏图片库

Answer 2

您还应该给超大号看一眼。我曾在几个项目中使用过它，而且从来没有遇到过问题。这是非常定制的。

Answer 3

html

<div id="Gpic1"><img id='table' src='http://i.imgur.com/7ESpNI8.jpg'></div>

Jquery

$('#Gpic1').hover(function(){
        $(this).find('img').fadeTo(500, 0.5);
    }, function(){
        $(this).find('img').fadeTo(500, 1);
    });

$('#table').click(function() {
        $('#Gpic1').find('img').fadeTo(0, 1);
        if($('#table').hasClass('enlarged')){
            $('#table').removeClass('enlarged');
            $("#table").stop().animate({width: 280, height: 187}, 200 );
        }else{
            $('#table').addClass('enlarged')
            $("#table").stop().animate({width: 800, height: 533}, 200 );
        }

    });

css

#Gpic1{
    width: 280px;
    height: 187px;
    display: block;
    background: black;
}

#table{
    width: 280px;
    height: 187px;
}

Jsfiddl演示