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

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

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

注意：filter是一个jQuery选择器（字符串）。

多个Featherlight画廊在一个页面上没有唯一的类

1 个答案: