1

我无法思考如何将 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') + '" />'});

我错过了什么？非常非常感谢您！

4

1 回答 1

1

不同的方法呢？...因此，.replace()我们将使用.each()将click事件绑定到每个缩略图并替换容器 中的大图像，而不是使用：#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

请注意，我们正在构建imgPanel实际替换缩放图像（在标签中）和大图像（在标签中）的数量(i+1)的变量href<a>src<img>

然后，<div id="panel">根据单击的缩略图替换容器的内容。

另一方面，将$("a.zoom").fancybox();fancybox绑定到链接很容易class="zoom"，但是您使用的是fancybox v1.3.4并且该版本不支持动态添加元素，请参阅此帖子以供参考。

所以我们需要以不同的方式初始化fancybox来支持那些动态元素（每次我们替换大图像时，我们都会.zoom动态地改变链接）

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

$(".gallery").delegate("#panel", "focusin", function () {
    $("a.zoom").fancybox();
});

请注意，我们在参考帖子中使用.delegate()而不是.on()as，因为您使用的是低于 v1.7.x 的 jQuery 版本

所以，总的来说

$(document).ready(function () {
    $("#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
    // initialize fancybox for dynamically added elements
    $(".gallery").delegate("#panel", "focusin", function () {
        $("a.zoom").fancybox();
    });
}); // ready

见JSFIDDLE

于 2013-03-19T21:54:22.463 回答