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

Using <picture> element

If you want to provide responsive images and/or multiple image formats, you can create a <picture> element to suit your needs.

Exactly how you create the <picture> element, how you define the sources, is up to your imagination. Here is just one example that uses additional data attributes for links:

<a
  href="https://lipsum.app/id/1/800x600"
  data-fancybox="gallery"
  data-media="(max-width: 799px);(min-width: 800px)"
  data-sources="https://lipsum.app/id/1/800x600;https://lipsum.app/id/1/1200x900"
>
  <img src="https://lipsum.app/id/1/200x150" />
</a>

Then use the Carousel.Zoomable.tpl option, the return value should be a string that will be used as a template. Don't forget to add the f-panzoom__content class name to the content element:

Fancybox.bind("[data-fancybox]", {
  Carousel: {
    Zoomable: {
      tpl: (slide) => {
        let rez = '<picture class="f-panzoom__content">';

        const media = slide.media.split(";");

        slide.sources.split(";").map((source, index) => {
          rez += `<source
media="${media[index] || ""}"
srcset="${source}"
/>`;
        });

        rez += `<img src="${slide.src}" alt="" />`;

        rez += "</picture>";

        return rez;
      },
    },
  },
});

JS Bin Example