<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>PhotoSwipe sample</title>
<link rel="stylesheet" href="https://npm.elemecdn.com/photoswipe@5.2.4/dist/photoswipe.css" />
</head>
<body>
<div id="gallery--no-dynamic-import">
<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>
</div>
<script type="module">
import PhotoSwipeLightbox from 'https://npm.elemecdn.com/photoswipe@5.2.4/dist/photoswipe-lightbox.esm.js';
import PhotoSwipe from 'https://npm.elemecdn.com/photoswipe@5.2.4/dist/photoswipe.esm.js';
const lightbox = new PhotoSwipeLightbox({
gallery: '#gallery--no-dynamic-import',
children: 'a',
pswpModule: PhotoSwipe
});
lightbox.init();
</script>
</body>
</html>