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

Opening multiple Fancybox galleries via manual links

本文关键字：Fancybox 画廊 链接      更新时间：2023-09-26

我试图通过手动调用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属性。唉，它不起作用。有什么可能出错的想法吗？非常感谢您的帮助！

提前感谢！

我假设您正在将选择器.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

相关文章：