Home

Required HTML markup

Each element that matches the selector should be or should contain link element. The link must have such attributes:

Image URL in href or data-pswp-src attribute (latter has higher priority).
Image width in data-pswp-width.
Image height in data-pswp-height.

And optionally:

<img> thumbnail within the link element that will be displayed before the large image is loaded (applied only for the first image, can be adjusted via thumbSelector).
Optional data-cropped="true" attribute if thumbnail is cropped. See also Animating from Cropped Thumbnail.

PhotoSwipe API supports almost any markup and any data source, read more about it here. Open each image individually

import PhotoSwipeLightbox from ‘/photoswipe/photoswipe-lightbox.esm.js’; const options = { gallery: ‘#gallery–individual a’, pswpModule: () => import(‘/photoswipe/photoswipe.esm.js’) }; const lightbox = new PhotoSwipeLightbox(options); lightbox.init();

Responsive images with srcset

Add data-pswp-srcset attribute. It supports the same markup as native srcset.
Attributes data-pswp-width and data-pswp-height should define the largest image size.
sizes attribute will be generated automatically based on actual width of the image. For example, if user zooms-in - sizes will be adjusted to the new zoom level.

import PhotoSwipeLightbox from ‘/photoswipe/photoswipe-lightbox.esm.js’; const options = { gallery: ‘#gallery–responsive-images’, children: ‘a’, pswpModule: () => import(‘/photoswipe/photoswipe.esm.js’) }; const lightbox = new PhotoSwipeLightbox(options); lightbox.init();

Supported browsers and fallback

The PhotoSwipe supports all browsers that support ES6 modules.
    Thus, it might not work in IE11, Opera Mini, UC browser, and old versions of Chrome, Safari, and Firefox. Check your website/region statistics before deciding whether you should use PhotoSwipe or not.
Users in unsupported browsers will still be able to view the large image if you use recommended HTML markup - link to image, or link to page that contains image.
You may add any fallback via script type="nomodule".