Images

Here are examples of how to use images with Fancybox and customize Panzoom instance that provides zoom and pan functionality.

Single image

If you don't want to create a gallery, use an empty data-fancybox attribute.

<a
  data-fancybox
  data-src="https://lipsum.app/id/1/1600x1200"
  data-caption="Hello world"
>
  <img src="https://lipsum.app/id/1/200x150" width="200" height="150" alt="" />
</a>

JS Bin Example

Gallery of images

Galleries are created by adding the same attribute data-fancybox value to multiple elements. For example, adding data-fancybox="gallery" attribute to multiple elements, will create a gallery from all these elements.

<a
  data-fancybox="gallery"
  data-src="https://lipsum.app/id/2/1600x1200"
  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" width="200" height="150" alt="" />
</a>

<a data-fancybox="gallery" data-src="https://lipsum.app/id/3/1600x1200">
  <img src="https://lipsum.app/id/3/200x150" width="200" height="150" alt="" />
</a>

<a data-fancybox="gallery" data-src="https://lipsum.app/id/4/1600x1200">
  <img src="https://lipsum.app/id/4/200x150" width="200" height="150" alt="" />
</a>

JS Bin Example

Gallery with one preview image

To create a gallery with a single preview image, simply create links for each item in the gallery, but only make one visible:

<a data-fancybox="gallery" href="https://lipsum.app/id/60/1600x1200">
  <img src="https://lipsum.app/id/60/200x150" width="200" height="150" alt="" />
</a>

<div style="display:none">
  <a data-fancybox="gallery" href="https://lipsum.app/id/61/1600x1200">
    <img src="https://lipsum.app/id/61/120x80" />
  </a>
  <a data-fancybox="gallery" href="https://lipsum.app/id/62/1600x1200">
    <img src="https://lipsum.app/id/62/120x80" />
  </a>
  <a data-fancybox="gallery" href="https://lipsum.app/id/63/1600x1200">
    <img src="https://lipsum.app/id/63/120x80" />
  </a>
</div>

JS Bin Example
JS Bin Example (using data attributes)

Mouse panning

Use Panzoom's panMode option to enable "mouse panning". mouseMoveFactor specifies how much the mouse should be moved for the image to reach the border of the screen.

const options = {
  Carousel: {
    Thumbs: false,
    Toolbar: {
      display: {
        left: [],
        middle: [],
        right: ["close"],
      },
    },
    Zoomable: {
      Panzoom: {
        maxScale: "cover",
        panMode: "mousemove",
        mouseMoveFactor: 1.1,
      },
    },
  },
};

JS Bin Example