## 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: