Captions
Fancybox supports captions out of the box. Use CSS to customize the design or even change the position completely.
Basic usage
Use data-caption
attribute to specify the content of the caption. If you want to use HTML content, you need to escape it:
<a
href="https://lipsum.app/id/31/1800x1200"
data-fancybox="gallery"
data-caption="Optional caption,<br />that contains <em>HTML</em> code"
>
<img src="https://lipsum.app/id/31/300x200" />
</a>
When using Fancybox programmatically, use caption
as the key for the slide object. Example of displaying a gallery:
Fancybox.show(
[
{
src: "https://lipsum.app/id/1/1800x1200",
thumbSrc: "https://lipsum.app/id/1/150x100",
caption: "Sample image #1",
},
{
src: "https://lipsum.app/id/2/1800x1200",
thumbSrc: "https://lipsum.app/id/2/150x100",
caption: "Sample image #2",
},
{
src: "https://lipsum.app/id/3/1800x1200",
thumbSrc: "https://lipsum.app/id/3/150x100",
caption: "Sample image #3",
},
],
{
// Your custom options
}
);
Example of showing only one slide:
Fancybox.show(
[
{
html: "<p>Lorem ipsum dolor sit amet.</p>",
caption: "Sample caption",
},
],
{
// Your custom options
}
);
Customize content
Use a carousel.formatCaption
option that accepts a function and is called for each element in the gallery.
An example of how to insert the current slide index and the total number of slides in the gallery in the caption:
Fancybox.bind("[data-fancybox]", {
Carousel: {
formatCaption: (carouselRef, slide) => {
return `${slide.index + 1} of ${carouselRef.getSlides().length}<br /> ${
slide.caption || ""
}`;
},
},
});
Customize source
If it's more convenient, you can, for example, store the content of the caption in another HTML element. Example:
<figure>
<a data-fancybox="gallery" href="https://lipsum.app/id/51/1800x1200">
<img src="https://lipsum.app/id/51/300x200" />
</a>
<figcaption>Sample caption</figcaption>
</figure>
Fancybox.bind("[data-fancybox]", {
Carousel: {
formatCaption: (_carouselRef, slide) => {
return slide.triggerEl?.nextElementSibling || "";
},
},
});
Fancybox.bind("[data-fancybox]", {
Carousel: {
formatCaption: (_carouselRef, slide) => {
return (slide.triggerEl?.nextElementSibling as HTMLElement) || "";
},
},
});
Align with the image
With a small snippet of JavaScript, you can position the caption so that it is aligned with the left edge of the image.
function resizeFancyboxCaption(slide) {
const captionEl = slide.captionEl;
const wrapperEl = slide.panzoomRef?.getWrapper();
if (!captionEl || !wrapperEl) {
return;
}
captionEl.style.visibility = "hidden";
captionEl.style.width = "";
void captionEl.offsetWidth;
for (let i = 0; i < 3; i++) {
captionEl.style.width = `${Math.max(
200,
wrapperEl.getBoundingClientRect().width
)}px`;
}
captionEl.style.visibility = "";
}
Fancybox.bind("[data-fancybox]", {
on: {
"Carousel.lazyLoad:loaded": (f, c, slide) => {
resizeFancyboxCaption(slide);
},
"Carousel.attachSlideEl": (f, c, slide) => {
resizeFancyboxCaption(slide);
},
"Carousel.panzoom:refresh": (f, c, slide) => {
resizeFancyboxCaption(slide);
},
},
});