JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
/>
<style>
.custom-fancybox-bg {
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
background: #fff;
z-index: -1;
opacity: 1;
transition: opacity 0.2s ease;
}
.is-closing .custom-fancybox-bg {
opacity: 0;
}
.fancybox__slide.has-image {
padding: 40px 80px;
}
</style>
</head>
<body>
<div>
<a
data-fancybox="gallery"
data-src="https://lipsum.app/id/2/1024x768"
data-caption="Optional caption,<br />that can contain <em>HTML</em> code"
>
<img src="https://lipsum.app/id/2/200x150" />
</a>
<a data-fancybox="gallery" data-src="https://lipsum.app/id/3/1024x768">
<img src="https://lipsum.app/id/3/200x150" />
</a>
<a data-fancybox="gallery" data-src="https://lipsum.app/id/4/1024x768">
<img src="https://lipsum.app/id/4/200x150" />
</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<script>
Fancybox.bind('[data-fancybox="gallery"]', {
on: {
reveal: (_fancybox, slide) => {
const doubleBorder = 10 * 2;
slide.contentEl.insertAdjacentHTML(
"beforeend",
`<div class="custom-fancybox-bg"></div>`
);
slide.customBG = slide.el.querySelector(".custom-fancybox-bg");
slide.panzoom.on("afterTransform", (panzoom) => {
const bgScale =
(panzoom.contentRect.width + doubleBorder) /
((panzoom.contentRect.fitWidth +...