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>
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,<br />that can contain <em>HTML</em> 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>
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,
},
},
},
};
Secondary click
Combine clickAction: "iterateZoom"
option with the maxScale
option for the Panzoom instance and you can achieve a secondary zoom level.
const options = {
Carousel: {
Zoomable: {
Panzoom: {
clickAction: "iterateZoom",
maxScale: 2,
},
},
},
};
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.
const options = {
Carousel: {
Zoomable: {
Panzoom: {
protected: true,
},
},
},
};
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;
},
},
},
});