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,&lt;br /&gt;that contains &lt;em&gt;HTML&lt;/em&gt; code"
>
  <img src="https://lipsum.app/id/31/300x200" />
</a>

JS Bin Example

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

JS Bin Example

Example of showing only one slide:

Fancybox.show(
  [
    {
      html: "<p>Lorem ipsum dolor sit amet.</p>",
      caption: "Sample caption",
    },
  ],
  {
    // Your custom options
  }
);

JS Bin Example

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

JS Bin Example

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>

JavaScript

Fancybox.bind("[data-fancybox]", {
  Carousel: {
    formatCaption: (_carouselRef, slide) => {
      return slide.triggerEl?.nextElementSibling || "";
    },
  },
});

TypeScript

Fancybox.bind("[data-fancybox]", {
  Carousel: {
    formatCaption: (_carouselRef, slide) => {
      return (slide.triggerEl?.nextElementSibling as HTMLElement) || "";
    },
  },
});

JS Bin Example

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

JS Bin Example