Question

是否有任何好的JavaScript / jQuery插件会在点击时“快速查看”图片？

我希望它很简单，所以当您点击图片缩略图时，它只会缩小到完整尺寸。

理想情况下，只需将所述图像赋予一个类就可以设置，而JavaScript / jQuery会完成其余的工作。

与此Apple.com页面上的图片类似，请参阅“导入”下的第一张图片。

我不是在寻找像灯箱这样复杂的东西，不需要幻灯片，冗长的介绍和淡出背景。

Answer 1

这可能是您正在寻找的那个：

http://gettopup.com/

我希望它有所帮助。

Answer 2

使用jQuery UI对话框插件非常简单。这假设您的thumb类将图像的大小调整为缩略图大小，并为图像重用相同的src网址。如果拇指有不同的网址，即它是不同的图像，那么您需要一种方法来存储带有缩略图图像的全尺寸图像（自定义属性？），或者将缩略图网址转换为完整尺寸图像的网址。如果你说“_thumb”附加到图像缩略图的名称，后者是微不足道的;只需使用字符串replace函数。

$('img.thumb').click( function() {
    $('<div><img src="' + $(this).attr('src') + '" /></div>').dialog({
        autoOpen: true,
        modal: true, // if you want it to be modal
        close : function(event,ui) {
             $(this).destroy();
        }
    });
});

您可以在http://cs-services.its.uiowa.edu/launchpad看到类似的内容。点击左上角的公告。

Answer 3

你可以尝试我的灯箱http://jslightbox.felixhagspiel.de/它不需要jQuery，并且响应和IE8兼容。您只需将data-jslghtbx - 属性添加到图片中，然后点击即可打开它们。或者，您可以将引用传递给更大的图像，例如data-jslghtbx='img/lightbox/apple-big.jpg'，这样您就可以使用小尺寸的图片来缩略图，这将打开灯箱中的大尺寸图片。此外，您可以使用组来显示多个图像。

简单的JavaScript / jQuery插件，可以“快速查看”图像

3 个答案: