通过手动链接打开多个 Fancybox 画廊

我尝试转换中提供的解决方案如何通过手动调用 html 中的画廊而不是通过 jquery 选项来打开 fancybox？为了将其应用到多个画廊，但无法使其正常运行。

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

<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>

etc.

这些应该适用于各自启用 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>

and

 <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属性。唉，这不起作用。关于可能出什么问题的任何想法吗？非常感谢您的帮助！

提前致谢！

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

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

如果是这样，那么您的代码的问题在于$(this.element)应该使用仅在 fancybox 回调中，但由于您使用的是常规 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();
    }
}); 

See JSFIDDLE