Fancyapps
Return to top
On this page

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