4

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

我希望它简单，所以当您单击图像缩略图时，它只会缩小到全尺寸。

理想情况下，只需为所述图像设置一个类，其余的由 JavaScript/jQuery 完成。

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

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

4

3 回答 3

2

这可能是您正在寻找的：

http://gettopup.com/

我希望它有所帮助。

于 2010-02-19T09:39:50.113 回答
1

使用 jQuery UI 对话框插件非常容易。这假设您的thumb班级将图像大小调整为缩略图大小，并为图像重用相同的 src url。如果拇指具有不同的 url，即它是不同的图像，那么您需要一种方法来存储带有缩略图图像的完整尺寸图像（自定义属性？）或将缩略图 url 转换为完整尺寸图像的 url。如果您说将“_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 。点击左上角的公告。

于 2010-02-13T20:42:50.217 回答
0

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

于 2014-10-23T11:23:28.983 回答