javascript - 一页上有多个 Fe​​atherlight 画廊，没有唯一的类

Question

如何使用 Featherlight 调用多个画廊无需使用独特类的图库？

我试过了

if($('.image-gallery').length) {
    $('.image-gallery').featherlightGallery({
        variant: 'gal',
        filter: $(this).find('.featured-image') 
    });
}

但我认为过滤器的工作方式与我想象的不同。

目前 - 它在同一个图库灯箱中加载页面上的每个项目。我想为每个父级 .image-gallery 创建一个独特的灯箱画廊。换句话说，单击第一个灯箱画廊中的箭头不应显示第二个灯箱画廊中的照片。

<div class="image-gallery">
     <div class="featured-image" data-featherlight="http://imgurl"><img /></div>
     <div class="featured-image" data-featherlight="http://imgurl"><img /></div>
</div>

<div class="image-gallery">
     <div class="featured-image" data-featherlight="http://imgurl"><img /></div>
     <div class="featured-image" data-featherlight="http://imgurl"><img /></div>
</div>

这是一个Fiddle .

Answer 1

你很接近。问题是，通过使用 data-featherlight，您使用的是自动绑定(bind)，这不是您想要的。关闭自动绑定(bind)，或更改您的标记，like this

最好的方法是单独绑定(bind)它们。我没有测试(因为你没有提供一个有效的例子)，但这应该有效:

$('.image-gallery).each(function(_i, gallery)) {
  $(gallery).featherlightGallery({
        variant: 'gal',
        filter: '.featured-image'
  });
})

注意:filter 是一个 jQuery 选择器(字符串)。