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

【问题标题】：Opening multiple Fancybox galleries via manual links通过手动链接打开多个 Fancybox 画廊
【发布时间】：2013-08-24 21:44:48
【问题描述】：

我已尝试转换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，并使用它打开第一个带有rel 属性值的Fancybox 项目。唉，它不起作用。关于可能出现问题的任何想法？非常感谢您的帮助！

提前致谢！

【问题讨论】：

标签： javascript jquery fancybox fancybox-2

【解决方案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

【讨论】：

谢谢！你太棒了！