Multiple Featherlight galleries on one page without unique classes

Question

How can I call multiple galleries using Featherlight Gallery without having to use unique classes?

I tried

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

but I don't think filter works the way I think it does.

Currently - it loads each item on the page in the same gallery lightbox. I want a unique lightbox gallery for each parent .image-gallery. In otherwords, clicking the arrows in the first lightbox gallery should not show me photos from the second one.

<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>

Here is a Fiddle.

Answer 1

You're pretty close. Problem is that by using data-featherlight, you are using the auto binding, which is not what you want. Turn the auto binding off, or change your markup, like this

Best way is to bind them individually. I didn't test (since you didn't provide a working example), but this should work:

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

Note: filter is a jQuery selector (string).