Question

我尝试转换How do I open fancybox via manual call for a gallery in the html not via the jquery options?中提供的解决方案，以便将其应用于多个图库，但无法使其正常运行。

我所拥有的是具有以下属性的几个链接：

<a href="#" class="open-album" data-open-id="album-1">Album 1</a>
<a href="#" class="open-album" data-open-id="album-2">Album 2</a>

等

这些应该适用于各自支持Fancybox的相册，例如：

 <a href="#" class="image-show" rel="album-1"><img src="#" /></a>
 <a href="#" class="image-show" rel="album-1"><img src="#" /></a>
 <a href="#" class="image-show" rel="album-1"><img src="#" /></a>

和

 <a href="#" class="image-show" rel="album-2"><img src="#" /></a>
 <a href="#" class="image-show" rel="album-2"><img src="#" /></a>
 <a href="#" class="image-show" rel="album-2"><img src="#" /></a>

Fancybox会查找.image-show类，并在单击图像时正常工作。

以下jQuery代码应该将相册标题链接到各自相册中的第一张图片：

 $('.open-album').click(function(e) {
    var el, id = $(this.element).data('open-id');
    if(id){
        el = $('.image-show[rel=' + id + ']:eq(0)');
        e.preventDefault();
        el.click();
    }
});

如您所见，目标是从相册标题中获取data-open-id并使用它打开第一个Fancybox项目，其值为rel属性。唉，它不起作用。什么可能出错？非常感谢您的帮助！

提前致谢！

Answer 1

我假设您将选择器.image-show绑定到fancybox，不是吗？

$(".image-show").fancybox();

如果是这样，您的代码的问题是$(this.element)应该使用within fancybox callbacks only，但由于您使用的是常规jQuery方法（.click()），那么您应该参考当前像$(this)

这样的元素

$('.open-album').click(function(e) {
    var el, id = $(this).data('open-id');
    if(id){
        el = $('.image-show[rel=' + id + ']:eq(0)');
        e.preventDefault();
        el.click();
    }
});

参见 JSFIDDLE

通过手动链接打开多个Fancybox图库

1 个答案: