fancybox v3.5 - Images

Examples of displaying images individually and combining into a gallery

Individual images

Add data-fancybox attribute to any link to enable fancyBox

Image gallery

Groups are created by adding the same data-fancybox attribute value


Gallery with one preview image

To show only one or a few images but have a large gallery, simply hide the rest of the links.
Optionally, use data-thumb for thumbnail image.

Data attributes

  • Use data-width and data-height attributes to predefine image dimensions. It is recommended to use these attributes for SVG files.
  • A caption can be added using the data-caption attribute.
  • It is possible to use data-* attributes to set any option. For example, data-small-btn="true" would display small close button on top of the image and hide the toolbar.

Using trigger element

Sometimes you might need to start fancyBox from different element - simply use data-fancybox-trigger attribute with the value of fancyBox group name. This allows to avoid content duplication in the gallery. For example, show fancybox when clicking on featured image:


Scroll to Top