一个页面上的多个轻量级图库，没有唯一的类

Question

如何在不使用唯一类的情况下使用Featherlight库调用多个库？

我试过了

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

但我不认为filter的工作方式是我认为的那样。

当前-它将页面上的每一项加载到相同的图库lightbox中。我想要一个独特的灯箱画廊为每个家长.image-gallery。换句话说，单击第一个lightbox库中的箭头应该不会显示第二个库中的照片。

<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，您正在使用自动绑定，而这并不是您想要的。关闭自动绑定，或更改您的标记like this

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

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

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