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,
},
},
},
};
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;
},
},
},
});