The script is now distributed as an ES module and does not require a build step to use. The documentation is also updated and now includes more examples.
PhotoSwipe now supports dynamic import and does not block page rendering.
<scripttype="module">
importLightboxfrom'./photoswipe-lightbox.esm.js';
const lightbox =newLightbox({
gallery:'#my-gallery',
children:'a',
pswpModule:()=>import('./photoswipe.esm.js')
});
lightbox.init();
</script>
Improved performance of most animations, touch gestures should feel more fluid now. The initial opening or closing transition can be run from a CSS-cropped thumbnail, as you can see on the top of this page.
Using CSS variables, default icons are dynamically generated and tiny.
Styling guide →
PhotoSwipe also dynamically loads larger images as a user zooms via srcset.
It's now much easier to control zoom level, refer to the Adjusting Zoom Level section of docs for more info. The example below opens images in a zoomed state and individually.
Some built-in features were removed in v5, either because they are using outdated technology or just rarely used. Some of them are or will be replaced by a plugin. These include:
A plugin that dynamically positions the caption below or aside depending on the available free space.
Tile-based image viewer that allows displaying of extremely large images. Unlike conventional tile-viewers (such as Leaflet or OpenSeaDragon) it displays tiles only after the user zooms beyond the primary image, and keeps all default PhotoSwipe navigation between slides.
PhotoSwipe is free for personal or commercial projects (MIT license).
Please support the development on Open Collective if you find it useful.
