3

我试图转换如何通过手动调用 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属性。唉,它不起作用。关于可能出现问题的任何想法?您的帮助将不胜感激!

提前致谢!

4

1 回答 1

4

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

于 2013-08-25T19:16:37.107 回答