Fancyapps

Grouping ​

Galleries are created by adding the same attribute data-fancybox value to multiple elements. You can mix images, videos and any HTML content in each gallery.

Use groupAttr and groupAll options to customize the creation of galleries.

A page can have an unlimited number of galleries and you can set custom options for all galleries as well as individually.

Multiple galleries ​

Sample HTML code for creating multiple galleries.

html
<!-- 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.

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

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

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

JSFiddle Example

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.

html
<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>
js
Fancybox.bind('[data-fancybox="single"]', {
  groupAttr: false,
});

JSFiddle Example

Group all elements ​

Use groupAll option to create a gallery of all matching elements.

html
<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>
js
Fancybox.bind("#gallery a", {
  groupAll: true,
});

JSFiddle Example