PhotoSwipe 5.4.4

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.