https://photoswipe.com/getting-started/
Example
const lightbox = new PhotoSwipeLightbox({
// may select multiple "galleries"
gallery: '#gallery--getting-started',
initialZoomLevel: 'fit',
// Elements within gallery (slides)
children: 'a',
imageClickAction: 'close',
tapAction: 'close',
closeOnVerticalDrag: false,
// setup PhotoSwipe Core dynamic import
// pswpModule: () => import('/photoswipe/photoswipe.esm.js')
pswpModule: photoswipe
});
lightbox.init();
<div class="pswp-gallery pswp-gallery--single-column" id="gallery--getting-started">
<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>
<!-- cropped thumbnail: -->
<a href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/7/img-2500.jpg"
data-pswp-width="1875"
data-pswp-height="2500"
data-cropped="true"
target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/7/img-200.jpg" alt="" />
Cropped
</a>
<!-- data-pswp-src with custom URL in href -->
<a href="https://unsplash.com"
data-pswp-src="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>
<!-- Without thumbnail: -->
<a href="http://example.com"
data-pswp-src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/5/img-2500.jpg"
data-pswp-width="2500"
data-pswp-height="1668"
target="_blank">
No thumbnail
</a>
<!-- wrapped with any element: -->
<div>
<a href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/6/img-2500.jpg"
data-pswp-width="2500"
data-pswp-height="1667"
target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/6/img-200.jpg" alt="" />
</a>
</div>
</div>