Question

我无法围绕如何将Fancybox应用到缩略图库，以便在加载主图像时点击它以打开该图像的更大版本。

我不知道，言语逃避了我。这是一个具体的例子：http://bloc-nc.com/projects/gateway.html

如果您从一个拇指切换到另一个拇指，则打开的大图像仍然是第一张图像而不是新图像。

我的代码如下所示：

$('#thumbs').delegate('img','click', function(){                
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});

$('#largeImage').wrap(function() {
    return '<a class="zoom" href="' + $(this).attr('src').replace('large','zoom') + '" />'});

我错过了什么？非常非常，非常感谢!!

Answer 1

不同的方法呢？ ...所以我们不是使用.replace()而是使用.each()将click事件绑定到每个缩略图，并替换{{1}中的大图像}} 容器：

#panel

注意我们正在构建变量$("#thumbs img").each(function (i) { $(this).click(function () { var imgPanel = '<a href="http://bloc-nc.com/projects/images/gateway/gateway' + (i + 1) + '_zoom.png" class="zoom" tabindex="' + (i + 1) + '"><img src="http://bloc-nc.com/projects/images/gateway/gateway' + (i + 1) + '_large.png" id="largeImage" /></a>'; $("#panel").html(imgPanel); }); // click }); // each，它实际上替换了 zoom 图像的数量imgPanel（{{1} } (i+1)代码）和大图片（位于href代码的<a>）

然后，根据点击的缩略图替换src容器的内容。

另一方面，使用<img>将fancybox绑定到<div id="panel">的链接会很容易，但是您使用的是fancybox v1.3.4且该版本不支持动态添加元素， see this post 以供参考。

因此我们需要以不同的方式初始化fancybox以支持这些动态元素（每次我们替换大型图像时，我们动态更改链接$("a.zoom").fancybox();）

这个脚本应该可以解决问题：

class="zoom"

请注意，我们使用的是.zoom而不是$(".gallery").delegate("#panel", "focusin", function () { $("a.zoom").fancybox(); });，因为您使用的jQuery版本低于v1.7.x

所以，完全

.delegate()

参见 JSFIDDLE

Fancybox，简单的缩略图库，以及点击时应用灯箱链接和新图像src

1 个答案: