Overlayed captions

[dmcrlsn]

How do I get slide captions to always appear overlayed on top of the slide image (just above the bottom of the image) instead of appearing below the image?

[fancyapps]

Hi,

The answer is - yes and no. There is no option for that, but you can place any HTML content over the image.
Here is an example that is using custom attribute for links:

<a
  href="https://lipsum.app/id/1/1600x1200"
  data-fancybox="gallery"
  data-title="Optional title,&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="" />
</a>

Fancybox.bind("[data-fancybox]", {
  zoomEffect: false,
  on: {
    "Carousel.contentReady": (_fancybox, _carousel, slide) => {
      if (slide.title) {
        slide.panzoomRef
          ?.getViewport()
          ?.insertAdjacentHTML(
            "beforeend",
            `<div style="position:absolute;left:0;right:0;bottom:0;color:#fff;background:rgba(0,0,0,0.2);padding:20px;">${slide.title}</div>`,
          )
      }
    },
  },
});

https://jsbin.com/kilukisuye/edit?html,output

[dmcrlsn]

This works well, thanks!