Fancybox and grouped galleries

JavaScript
1

I know that Fancybox should be managed inside JS like:

 $('[data-fancybox="gallery"]').fancybox(

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

2

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

$(".fancybox").fancybox();
2 Likes
3

Fancybox3 demands not rel as V2.

data-fancybox=XXX

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.

4

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

data-fancybox-group="gallery01"
.......
.......
data-fancybox-group="gallery02"
5

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

6

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

$(".fancybox").fancybox();
7

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

data-fancybox-group="galleryXX"

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

$(‘[data-fancybox=“galleryXXX”]’).fancybox(

8

Did you try it?

9

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

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?

11

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

Will this work as your .CLASS and group?
It is modification from URL:https://www.surrealcms.com/tuts/how-to-edit-a-fancybox-gallery

<!DOCTYPE HTML>

<html>

<head>
<title>Fancybox gallery</title>
<script>
$(document).ready(function()
 {
  var galleryId = 1;
  $('.gallery').each(function()
   {
    $(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;
    }
   }
  );
 }
);
</script>
</head>

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

</html>
12

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