The next major release and the project status (your feedback needed)

Demo and docs for the new version

Hi all,

I’d like to share an update on the PhotoSwipe development. And I need your feedback.

Code rewrite and quality

I rewrote everything to modern JavaScript, it should now be easier to contribute or extend. Total JS file size is reduced by about 15%. The code is published in v5-beta branch (src/ for source files, dist/ for compiled files).

Skinning

PhotoSwipe no longer requires an external sprite and has only a single CSS file. Default icons are generated via JavaScript and are very small. Minor styling can be done via CSS variables.

I designed the new icons so they’re visible on the dark and light background without having a dark backdrop:

A new guide on how to use your own icons →

Initialization

As you probably know, the current PhotoSwipe initialization is quite a mess, I’m trying to fix this problem.

In the new version, you’re no longer required to include HTML structure for the lightbox itself.

The new version is split into two components, the second is loaded only after user initiates opening, so basic initialization looks like this:

<script type="module">
import PhotoSwipeLightbox from '/v5/photoswipe/photoswipe-lightbox.esm.js';
const options = {
  gallerySelector: '.gallery',
  childSelector: 'a',
  pswpModule: '/v5/photoswipe/photoswipe.esm.js',
};
const lightbox = new PhotoSwipeLightbox(options);
lightbox.init();
</script>

More info about what this code does here.

Obviously, such initialization is optional, and you can just include files via script src.

Animations

• PhotoSwipe now always uses CSS transitions whenever possible to ensure smooth animation.
• Improved gesture animations algorithm, it now uses spring animations and more accurately matches native scroll views.
• Animations are now automatically disabled if the user prefers-reduced-motion.

Opening from cropped thumbnail

PhotoSwipe is now able to animate from the cropped thumbnail. Test it →

Opening image in a zoomed state

It’s now easier to control the initial zoom level, Test it →.

Reponsive images

You may now define srcset for images inside the lightbox.

PhotoSwipe now automatically generates and updates sizes attribute depending on zoom level.

Features that will likely be removed:

• Social sharing
• History API
• Native fullscreen button (https://photoswipe.com/v5/docs/native-fullscreen-on-open/)
• Close by scrolling via mousewheel

You may now support PhotoSwipe on OpenCollective

I’ve lost motivation and abandoned the project for a year. I’m trying to find a way to prevent this from happening in the future and keep PhotoSwipe free and open-source.

I’ve created an OpenCollective account, consider sponsoring PhotoSwipe development. To give something in return I will provide email support for sponsors, so you may ask any question if you’re having a problem.

---

If you have a minute, please test demos for v5 Beta on your mobile device, report issues via GitHub, or just email me.

[john-gr]

To be honest the “Native fullscreen button” is one of the pros on photoswipe please try not to remove it

I use full screen option more often then the zoom in button not sure what other people’s opinion on this but this is my use case.

going directly to full screen is great but it is not good for accessibility which is becoming more and more important everyday. instead of directly opening full screen it will be nice to provide option to choose when and if user wants full screen

thanks

[evenreven]

This looks extremely promising. I’m refactoring my entire application frontend now (Rails/Sprockets/jquery to Rails/webpack/vanilla-js/Stimulus) and I’m struggling with Photoswipe because of an old and opaque jquery initializer script, and thinking maybe I should just make the jump to v5 to avoid the extra work.

Getting this to work seems to take minimal effort unless you’re doing something crazy. I’m a novice, and I got it to work with Rails with responsive images and captions in fifteen minutes with a working backend. In contrast, getting a barely working refactored v4 setup up and running took me hours and hours, and that wasn’t even with responsive images (not the fault of v4 per se, my old setup was hard to parse). Great work lowering the barrier to entry, a lot of people will appreciate this! (And thanks for writing thorough examples, I never would have got captions to work otherwise.) I will test more the coming days to look for surprising behaviour (or bugs).

One thing, though: Maybe I’m dense, but can I integrate the examples with a bundler like webpack? The main problem is the inclusion of the pswpModule core (and css) via the options as URL and not through, say, an import statement. Using the webpack path obviously doesn’t work, since node_modules isn’t a public path. I’ve put the whole Photoswipe dist folder in my public path for now, but would like to serve it from node_modules if I can (instead of using a separate script tag). If importing the core module and the css is possible, it’s easier to help with testing transpiling as well. If that’s a goal for you, that is!