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

Question

我试图通过手动调用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>

等等

这些应该适用于各自支持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)应仅在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();
    }
}); 

请参阅JSFIDDLE