Images

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

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/1/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/1/200x150"
    width="200"
    height="150"
    alt="Sample image #1"
  />
</a>

<a data-fancybox="gallery" data-src="https://lipsum.app/id/2/1600x1200">
  <img
    src="https://lipsum.app/id/2/200x150"
    width="200"
    height="150"
    alt="Sample image #2"
  />
</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="Sample image #3"
  />
</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="Sample image #1"
  />
</a>
<div style="display:none">
  <a data-fancybox="gallery" href="https://lipsum.app/id/61/1600x1200">
    <img
      src="https://lipsum.app/id/61/200x150"
      width="200"
      height="150"
      alt="Sample image #2"
    />
  </a>
  <a data-fancybox="gallery" href="https://lipsum.app/id/62/1600x1200">
    <img
      src="https://lipsum.app/id/62/120x80"
      width="200"
      height="150"
      alt="Sample image #3"
    />
  </a>
</div>

JS Bin Example
JS Bin Example (using data attributes)

Single image

If you don't want to group your elements 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="Sample image"
  />
</a>

JS Bin Example

Initial image size

The image can initially be set to any zoom level supported by Panzoom. Here is an example where the image size is set to cover the screen, and the zoom effect and carousel dragging are disabled:

Fancybox.bind("[data-fancybox]", {
  zoomEffect: false,
  Carousel: {
    gestures: false,
    Zoomable: {
      Panzoom: {
        startPos: {
          scale: "cover",
        },
      },
    },
  },
});

JS Bin Example

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.

Fancybox.bind("[data-fancybox]", {
  Carousel: {
    Thumbs: false,
    Toolbar: {
      display: {
        left: [],
        middle: [],
        right: ["close"],
      },
    },
    Zoomable: {
      Panzoom: {
        maxScale: "cover",
        panMode: "mousemove",
        mouseMoveFactor: 1.1,
      },
    },
  },
});

JS Bin Example

Secondary click

Combine clickAction: "iterateZoom" option with the maxScale option for the Panzoom instance and you can achieve a secondary zoom level.

Fancybox.bind("[data-fancybox]", {
  Carousel: {
    Zoomable: {
      Panzoom: {
        clickAction: "iterateZoom",
        maxScale: 2,
      },
    },
  },
});

JS Bin Example

Image protection

Use the Panzoom protected option to enable basic image protection against downloading images using the right mouse button. You can also add a watermark by setting the background to the .f-panzoom__protected element.

Fancybox.bind("[data-fancybox]", {
  Carousel: {
    Zoomable: {
      Panzoom: {
        protected: true,
      },
    },
  },
});

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