我试图转换 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 项目属性。 las,它不起作用。关于可能出什么问题的任何想法?非常感谢您的帮助!
提前致谢!
最佳答案
我假设您正在将选择器 .image-show
绑定(bind)到 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
关于javascript - 通过手动链接打开多个 Fancybox 画廊,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18423406/