Grouping

Galleries are created by adding the same value of the data-fancybox attribute (customizable using the groupAttr option) to multiple elements. You can mix images, videos, and any HTML content within each gallery.

You can have an unlimited number of galleries on a page, and you can set custom options for all galleries, as well as individually.

Multiple galleries

Sample HTML code for creating multiple galleries.

<!-- First gallery -->
<a href="image-a1.jpeg" data-fancybox="gallery-a" data-caption="Gallery A #1">
  <img src="thumbnail-a1.jpeg" />
</a>

<a href="image-a2.jpeg" data-fancybox="gallery-a" data-caption="Gallery A #2">
  <img src="thumbnail-a2.jpeg" />
</a>

<!-- Second gallery -->
<a href="image-b1.jpeg" data-fancybox="gallery-b" data-caption="Gallery B #1">
  <img src="thumbnail-b1.jpeg" />
</a>

<a href="image-b2.jpeg" data-fancybox="gallery-b" data-caption="Gallery B #2">
  <img src="thumbnail-b2.jpeg" />
</a>

Customization sample.

Fancybox.bind("[data-fancybox]", {
  // Custom options for all galleries
});

Fancybox.bind('[data-fancybox="gallery-a"]', {
  // Custom options for the first gallery only
});

Fancybox.bind('[data-fancybox="gallery-b"]', {
  // Custom options for the second gallery only
});

Disable grouping

If you can't or don't want to use data-fancybox attributes for your elements, you can specify other attribute using the groupAttr option. If you set it to false, grouping is disabled.

<a href="image-a1.jpeg" data-fancybox="single" data-caption="Single #1">
  <img src="thumbnail-a1.jpeg" />
</a>

<a href="image-a2.jpeg" data-fancybox="single" data-caption="Single #2">
  <img src="thumbnail-a2.jpeg" />
</a>

Fancybox.bind('[data-fancybox="single"]', {
  groupAttr: false,
});

Group all elements

Use groupAll option to create a gallery of all matching elements, regardless of any attributes.

<div id="gallery">
  <a href="image-a1.jpeg" data-caption="Image #1">
    <img src="thumbnail-a1.jpeg" />
  </a>

  <a href="image-a2.jpeg" data-caption="Image #2">
    <img src="thumbnail-a2.jpeg" />
  </a>
</div>

Fancybox.bind("#gallery a", {
  groupAll: true,
});