How to set a group for the gallery?

Question

we have a set of content Elements that we can turn into a gallery.

I just add them a class ".gallery" , with this setup:

$('.gallery').featherlightGallery({
  previousIcon: '',
  nextIcon: ''
});

We wish to have the gallery group for every Content Element, cause there targeting a special topic - but with the actual setup every image inside a.gallery ist shown in that Gallery, so we can switch between this topics which isn´t what we want.

I dont see any info about grouping a Gallery on the docs, is there any other way? Other lightboxes use a data-rel="group1" or something like this.

Any infos about this would be nice.

Cheers

Answer 1

Sure, use the filter parameter. Assuming that your galleries are grouped inside some <div class="grouping">:

$('.grouping').featherlightGallery({filter: '.gallery'}, ...);

Answer 2

thanks for the fast answer, didn´t get that from the docs, now its working but not the way i assumed.

Here a short setup of my elements:

Every contentElement we have, as an example: text with pics, 2 pics in a row, 3 pics in a row, 3pics in a row with text have a wrapper class ".contentElement".

Every gallery image in there have a class ".gallery", so i thought i could use:

$('.contentElement').featherlightGallery({
     previousIcon: '',
     nextIcon: '',
     filter: '.gallery'
});

but this does not work, same result as the method i used before. I can switch between every Image on the page with the gallery.

It works this way:

$(".contentElement").each(function(){
     $(this).featherlightGallery({
        filter: '.gallery',
        previousIcon: '',
        nextIcon: ''
      });
});

but i assumed the first one should have worked too, or am i wrong cause there´s a obvious reason?

Thanks anyway for the fast reply, helped me a lot.

Cheers