What’s new in v5
Code quality and rewrite in ES6
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.
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 a CSS-cropped thumbnail, as you can see on the top of this page.
Single CSS file and no external assets
Using CSS variables, default icons are dynamically generated and tiny.
Styling guide →
Built-in responsive images support
PhotoSwipe also dynamically loads larger images as a user zooms via srcset.
Open images in a zoomed state
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.
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).
Plugins
Dynamic Caption plugin
A plugin that dynamically positions the caption below or aside depending on the available free space.
Tiled Deep Zoom plugin (experimental)
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.
License
PhotoSwipe is free for personal or commercial projects (MIT license).
Please support the development on Open Collective if you find it useful.