JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/photoswipe.css">
<div class="pswp-gallery" id="my-gallery">
    <a
      href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/1/img-2500.jpg"
      data-pswp-width="1875"
      data-pswp-height="2500"
      target="_blank"
    >
      <img
        src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/1/img-200.jpg"
        alt=""
      />
    </a>
    <a
      href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-2500.jpg"
      data-pswp-width="1669"
      data-pswp-height="2500"
      target="_blank"
    >
      <img
        src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-200.jpg"
        alt=""
      />
    </a>
    <a
      href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-2500.jpg"
      data-pswp-width="2500"
      data-pswp-height="1666"
      target="_blank"
    >
      <img
        src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-200.jpg"
        alt=""
      />
    </a>
  </div>

JavaScript

import PhotoSwipeLightbox from 'https://unpkg.com/photoswipe/dist/photoswipe-lightbox.esm.js';

const lightbox = new PhotoSwipeLightbox({
  gallery: '#my-gallery',
  children: 'a',
  pswpModule: () => import('https://unpkg.com/photoswipe'),
});

lightbox.init();


const el = document.createElement('a');
el.setAttribute('href', "https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-2500.jpg");
el.setAttribute('data-pswp-width', '2500');
el.setAttribute('data-pswp-height', '1666');
el.setAttribute('targe', '_blank');
el.innerHTML = `<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-200.jpg">`;
document.body.append(el);