fancyBox v3.1 - Images

Single image

Add a data-fancybox attribute to any image link to enable fancyBox.

Image gallery

Galleries 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.

fancyBox v3.1 - Display images progressively

fancyBox can display thumbnail instantly while full-size image incrementally appears over top, thus making the wait less painful.
Simply add data-width and data-height attributes.

fancyBox v3.1 - Images using "srcset"

The first one does not wait for full image to load and uses thumbnail as preview image.