Question

我一直在寻找在这两个网站中使用什么插件进行全屏图像查看：

我正在寻找一个类似的jQuery模块（或教程）。请注意，当您点击产品图片时我正在谈论全屏图片，而不是当鼠标悬停在图像上时“CloudZoom”功能。我目前正在使用广泛使用的Lightbox模块和CloudZoom，但Lightbox加载的图像是大的（因为href指向一个大图像，用于CloudZoom缩放）。

我需要的是拥有一个使用完整浏览器尺寸的图像（不大于当前浏览器，因为灯箱会创建一个不透明的深色背景，只占用浏览器的高度。如果我的图像更大，用户可以向下滚动，但灯箱深色背景不会填满页面。）

非常感谢你的帮助

Answer 1

以下是您可以获取可能对您有帮助的图片zoom plugin的链接。

根据您的示例2

Zoom Effect plugin

<强>更新

这是jQuery fullscreen image gallery

Answer 2

您还应该看一下Supersized。我已将它用于几个项目，并且从未遇到任何问题。它非常可定制。

Answer 3

您可能需要查看使用图片切片的“CloudZoom”。这样您的原始图像可以根据需要大小 - 如果您愿意，可以使用10mp，20mp甚至100mp：http://www.ajax-zoom.com/examples/example20.php如果单击该图像，也支持全屏。

Answer 4

<强> 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 demo

Answer 5

您是否尝试过：Touch Gallery?

使用jQuery进行图像缩放

5 个答案: