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"
          />
  </head>
  <body>
    <div>
      <a
         data-fancybox="gallery1"
         data-src="https://lipsum.app/id/3/2000x1500"
         data-to="top-left"
         >
        <img src="https://lipsum.app/id/3/200x150" />
      </a>

      <a
         data-fancybox="gallery2"
         data-src="https://lipsum.app/id/3/2000x1500"
         data-to="bottom-right"
         >
        <img src="https://lipsum.app/id/3/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]", {
        compact: false,

        showClass: false,
        hideClass: false,
        animated: false,
        dragToClose: false,
        Images: {
          zoom: false,
        },
        on: {
          reveal: (fancybox, slide) => {
            if (slide.to) {
              slide.panzoom.zoomTo(2);

              const bounds = slide.panzoom.getBounds();

              if (slide.to === "top-left") {
                slide.panzoom.panTo({
                  x: bounds.x.min * -1,
                  y: bounds.y.min * -1,
                });
              } else if (slide.to === "bottom-right") {
                slide.panzoom.panTo({
                  x: bounds.x.max * -1,
                  y: bounds.y.max * -1,
                });
              }
            }
          },
        },
      });   
    </script>
  </body>
</html>