Skip to main content

Image

Provides support for images. Creates <img> element, handles preloading, cursor styles, click, double click and wheel events, zoom in/out animations. It also initializes Panzoom instance and you can use that, for example, to toggle image zoom level:

Fancybox.getInstance().getSlide().Panzoom.toggleZoom();

Image-specific customization options can be set using plugin name Image as an option:

Fancybox.bind("[data-fancybox]", {  Image: {    zoom: false,  },});

An alternative is to change the defaults:

Fancybox.defaults.Image = { zoom: false };

Usage#

Declarative#

The standard way of using Fancybox is with a number of thumbnail images that link to larger images. The data-src (or href) attribute is used to specify the path to the larger version of the image.

Optional image-specific data attributes:

  • data-srcset - set srcset attribute for image element;
  • data-sizes - set sizes attribute for image element.

Single image#

<a data-fancybox="single" href="https://lipsum.app/id/1/800x600">  <img src="https://lipsum.app/id/1/300x225" /></a>

Responsive image with srcset and sizes#

<a  data-fancybox="responsive"  data-src="https://lipsum.app/id/5/800x600"  data-srcset="https://lipsum.app/id/5/480x360 480w, https://lipsum.app/id/5/800x600 800w"  data-sizes="(max-width: 600px) 480px, 800px">  <img src="https://lipsum.app/id/5/200x150" width="200" height="150" /></a>

Gallery of images#

<a  data-fancybox="gallery"  data-src="https://lipsum.app/id/2/1024x768"  data-caption="Optional caption,&lt;br /&gt;that can contain &lt;em&gt;HTML&lt;/em&gt; code">  <img src="https://lipsum.app/id/2/200x150" /></a>
<a data-fancybox="gallery" data-src="https://lipsum.app/id/3/1024x768">  <img src="https://lipsum.app/id/3/200x150" /></a>
<a data-fancybox="gallery" data-src="https://lipsum.app/id/4/1024x768">  <img src="https://lipsum.app/id/4/200x150" /></a>

Programmatic#

var gallery = [  {    src: "https://lipsum.app/id/2/800x600",    thumb: "https://lipsum.app/id/2/80x80",    caption: "First image",  },  {    src: "https://lipsum.app/id/3/800x600",    thumb: "https://lipsum.app/id/3/80x80",    caption: "Second image",  },  {    src: "https://lipsum.app/id/4/800x600",    thumb: "https://lipsum.app/id/4/80x80",    caption: "Third image",  },];
Fancybox.show(gallery, {  Image: {    // Image-specific options go here, for example:    // click: 'close'  },});

Options#

Panzoom {Object}#

Options for Panzoom instance. Default:

{  maxScale: 1,}

canZoomInClass {String}#

Class name for slide element indicating that content can be zoomed in. Default: can-zoom_in

canZoomOutClass {String}#

Class name for slide element indicating that content can be zoomed out. Default: can-zoom_out

zoom {Boolean}#

Do zoom animation from thumbnail image when starting or closing fancybox. Default: true

zoomOpacity {String|Boolean}#

Animate opacity while zooming. Default: auto

zoomFriction {Number}#

Zoom animation friction. Default: 0.8

ignoreCoveredThumbnail {Boolean}#

Disable zoom animation if thumbnail is visible only partly.

click {String|null}#

Action to be performed when user clicks on the image. Default: 'toggleZoom'
Possible values: toggleZoom, next, close or null`.

doubleClick {String|null}#

Action to be performed when double-click event is detected on the image. Default: null.
Possible values: toggleZoom or null.

wheel {String|null}#

Action to be performed when double-click event is detected on the image. Default: zoom
Possible values: zoom, slide, close or null.

fit {String}#

How image should be resized to fit its container. Default: contain
Possible values: contain, contain-w or cover.