Major update that changes initialization method!
What's new
Code quality and rewrite in ES6
The script is now distributed as an ES module and does not require a build step to use.
Simpler initialization and dynamic import support
PhotoSwipe now supports dynamic import and does not block page rendering.
<script type="module">
import Lightbox from './photoswipe-lightbox.esm.js';
const lightbox = new Lightbox({
gallery: '#my-gallery',
children: 'a',
pswpModule: () => import('./photoswipe.esm.js')
});
lightbox.init();
</script>
Animation and gesture engine update
Improved performance of most animations, touch gestures should feel more fluid now. The initial opening or closing transition can be run from cropped thumbnails.
Single CSS file and no external assets
Using CSS variables, default icons are dynamically generated and tiny.
Built-in responsive images support
PhotoSwipe also dynamically loads larger images as the user zooms via srcset.
Open images in zoomed state
It's now much easier to control the zoom level.
Removed features from the core
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:
- History API (#hash-based navigation is outdated)
- Social sharing (unreliable URL, lack of Opengraph support)
- Fullscreen button (rarely used, double fullscreen). Related example in docs →
- Caption (accessibility problems). Refer to the caption section of docs.
- Inline gallery support (v5 is mainly designed to be used as a dialog).