Fancybox and grouped galleries

I know that Fancybox should be managed inside JS like:


If I have many galleries with the same attributes but as a separate group how to manage this within one line like:

 $('[data-fancybox="gallery1, data-fancybox="gallery2, data-fancybox="gallery3"]').fancybox(

My example is just to show an issue and how to manage gallery1-X

Are all those galleries on just one page? If that’s the case you could use the rel atribute to seperate the different galleries:

<a class="fancybox" rel="gallery01" href="image1"><img /></a>
<a class="fancybox" rel="gallery02" href="image8"><img /></a>

and just use the basic call


Fancybox3 demands not rel as V2.


How to combine all within Javascript as I have to separate them from single image or iFrame. They can be on the same page or on other pages.

@toplisek In that case you could use data-fancybox-group


yes, but how to manage inside Javascript as gallery01, gallery02…as they have the same attributes*

Since you use data-fancybox-group the pluginn knows which images/photos are related. So as I said before you can just use


I have many galleries and separate groups on the same page. Images are grouped based on


But they have the same attributes. So, I try to manage this using Javascript and add data-fancybox-group=“galleryXX” to the same


Did you try it?

This is an option to add CLASS for each attribute, but it will not be used as Fancybox is connected to single page, iFrame…
In this way I do not need .CLASS but only once data-fancybox which is required.
I thought it is technically possible to add many data-fancybox inside the same attributes without .CLASS. In your case data-fancybox as gallery will define gallery and .CLASSXX will define each separate gallery on the same page.

just example for my goal:

 $('[data-fancybox="gallery1, data-fancybox="gallery2, data-fancybox="gallery3"]').fancybox(

I’m not sure what you mean with this? data-fancybox-group is not a class. I ask again did you try it using data-fancybox-group?

I have not tested -group. I have to verify.

Will this work as your .CLASS and group?
It is modification from URL:



<title>Fancybox gallery</title>
  var galleryId = 1;
    $(this).find('a').attr('data-fancybox-group', 'gallery-' + galleryId++);
  $('.gallery a').fancybox(
   beforeShow: function() {
     var alt = this.element.find('img').attr('alt');
     this.inner.find('img').attr('alt', alt);
     this.title = alt;

<div class="gallery">
<a href="largeimage1.jpg" data-fancybox-group="gallery-1"><img src="thumbnail1.jpg" alt="Desc."></a>
<!--//Rest code-->


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.