JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://github.com/google/marzipano/raw/master/demos/embedded-hotspots/style.css">
<script src="https://www.marzipano.net/build/marzipano.js"></script>

<link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
      />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>

<div id="pano" style="width: 500px; height: 500px"></div>

<a data-fancybox="gallery" href="#pano">
  <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>

CSS

#pano {
  padding: 0;
}

JavaScript

Fancybox.bind('[data-fancybox]', {
  compact: false,
  Carousel : {
    Panzoom : {
      touch : (panzoom, event) => {
        return !event?.target.closest("#pano");
      }
    }
  }
});     

var panoElement = document.getElementById('pano');
var viewerOpts = {
  controls: {
    mouseViewMode: 'drag'    // drag|qtvr
  }
};

var viewer = new Marzipano.Viewer(panoElement);
var geometry = new Marzipano.EquirectGeometry([{
  width: 8192
}]);
var source = Marzipano.ImageUrlSource.fromString("https://t3.ftcdn.net/jpg/03/66/15/30/360_F_366153001_8Sz67wI8s4CWm768IZlch9DXwlvExD4w.jpg");

var limiter = Marzipano.RectilinearView.limit.traditional(1024, 100*Math.PI/180);
var view = new Marzipano.RectilinearView({ yaw: Math.PI }, limiter);

var scene = viewer.createScene({
  source: source,
  geometry: geometry,
  view: view,
  pinFirstLevel: true
});

scene.switchTo();

panoElement.style.display = "none";