New Photoswipe 5

No, I am not working on the integration yet since dozens of other things had to be done first for straighten the backend code and keep the whole thing maintainable (it’s alreay over 1000 lines of code…).

However since it is now official out of beta I will check it out for sure. There are just some things to solve first:

1. How to bring back the “slider” animation in desktop mode?
2. How to handle dynamic DOM changes after the page was already loaded (PhotoSwipe 5 seems to install the event listener now on its own – which will cause problems of parts of the pages change dynamically)?
3. What about people who created their own styles or markup extension? These won’t work any longer with PhotoSwipe 5.

If you want to support this development, you can contact me with me via e-mail (see <https://arnowelzel.de/en/about-me&gt;) – so we can keep in touch about providing a beta version of my plugin etc..

Another thing I am missing yet: there is no full screen button.

Edit:

It turns out that a fullscreen button has to be added as a plugin as BilouMaster did:

https://github.com/dimsemenov/PhotoSwipe/issues/1759

For captions one also needs to add some code – but then it is very flexible on the other hand.

I will work on this, but it may take a while.

• This reply was modified 2 years, 9 months ago by Arno Welzel.

I got the very first integration of PhotoSwipe 5 working locally and it looks quite promising :-).

It’s far from ready and can not used for production, but if you would like to play with it on a local test site:

https://github.com/arnowelzel/lightbox-photoswipe/tree/photoswipe5

There is still a lot to do, like displaying captions, adding a fullscreen button and migrating all the existing options for PhotoSwipe 4 (or remove them in the admin UI if they can not be used with the new version). In the end there will be a new option to choose between PhotoSwipe 4 or PhotoSwipe 5 where new installations will use PhotoSwipe 5 by default and existing setups can be changed manually.

I’ll be on vacation for a while, but hopefully within a few weeks we may have at least a feature complete beta version to be tested.

Ah – and my website with contact information was malformed, this is the correct one: https://arnowelzel.de/en/about-me

• This reply was modified 2 years, 9 months ago by Arno Welzel.

That’s great that you are working on it! I will test it out. So many of my website visitors are using iOS devices I would gladly give up features to make it work more consistently on those. I think an option to choose the version would be perfect.

The first test drive using PhotoSwipe 5 is ready:

https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe-5/

Please feel free to test it with iOS devices as well and let me know how it works.

In addition to the basic functionality I also added a custom full screen plugin (keyboard shortcut “F” to enter full screen view also works) and the “dynamic caption” by Dmytro Semenov which allows to show captions either placed automatically or always aside or below the images.

As suggested by Dmytro Semenov the plugin will now also try to use a lower resolution preview of the images for the opening transition for better performance. This also applies to PhotoSwipe 4 as you can see on other demo pages like https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe/. If no lower resolution is available, the original image is used.

Another change: the plugin now also allows to use the unscaled original image size in case WordPress decided to scale down an uploaded image and serve it with the postfix “-scaled” in the name.

Changes compared to PhotoSwipe 4 so far:

• No support for changing or using the browser history. This is not supported any longer by PhotoSwipe 5.
• No more swipe animation in desktop mode. This is not supported any longer by PhotoSwipe 5.
• No sharing options, since PhotoSwipe 5 does not provide any sharing menu out of the box and I did not have the time and motivation yet to create my own sharing menu plugin.
• No automatic hiding of UI elements in desktop mode.
• No mouse wheel options in desktop mode – the mouse wheel will work as designed in PhotoSwipe 5 for zooming and scrolling only
• No custom options for mobile view.

Some of these things may change for the final release.

If you are interested in using this version as a beta tester, please let me know and I can provide a ZIP file for manual installation.

That sounds great, yes I would like to beta test it if you could send me a link. Or can I just it from Github? I tested your example and you can drag the image even in desktop mode. I actually think just using arrows is probably less confusing for desktop users anyway. It’s mobile where people expect to swipe.

PhotoSwipe 4 also supported dragging in desktop mode – so this is not a change anyway and I don’t want to change the core of PhotoSwipe 5 which is responsible for this.

About using the GitHub version – yes, you can just use that as well. Just keep in mind to use the tagged beta version:

https://github.com/arnowelzel/lightbox-photoswipe/tree/beta-5.0.0

I was testing the new version on iOS, and it does seem to work much better. Thanks for adding this option. I was wondering if you could eventually add an option to overlay the bottom caption over the image and have the image extend all the way to the bottom of the viewport. I was trying to do the with CSS but the way the image height and caption top location are set inline I’m assuming with javascript, I couldn’t figure out how to do it. Thanks!

Thanks for the feedback.

The caption does indeed also influence the image size and position as it is based on the “dynamic caption” plugin:

https://github.com/dimsemenov/photoswipe-dynamic-caption-plugin

https://dimsemenov.github.io/photoswipe-dynamic-caption-plugin/

However since caption display is implemented as plugin it may be possible to implement some another variation which adds captions as overlays as well, similar to the generic example in the documentation:

https://photoswipe.com/caption/

However this has to be developed first. I’ll see what I can do. But additional options may be be possible in the final version thanks to the flexible and modular architecture of PhotoSwipe 5.

Release 5 is ready to use!

Some additional customization options will be added in future updates, but as it is now, it should already be quite usable.

Awesome, it seems to be working great. You definitely have the best Lightbox plugin now for WordPress.