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: