PhotoSwipe V5 link to a specific gallery photo?

[BozoDiClown]

I've been using PhotoSwipe v4.1.2 since 2018. It's been great! One feature is that I can send someone the URL ending with "#&gid=1&pid=N" to open the gallery to the Nth photo in it.

Recently, I've started experimenting with PhotoSwipe v5.4.4. It seems that with PhotoSwipe v5, the URL does not change as I swipe through the gallery. Does this mean that there's no way to reference the Nth photo in the gallery?

Thanks much!

[arnowelzel]

There is no official way to do this, since PhotoSwipe 5 no longer supports URL fragments as PhotoSwipe 4 did. You will have to implement this on your own.

[BozoDiClown]

Thanks much for the reply.

May I add this as a feature request?

Thanks!

[arnowelzel]

I don't have time to work on this, but when someone checks the code for PhotoSwipe 4 it is maybe possible, to provide this as a PhotoSwipe 5 plugin similar to the plugins for caption and fullscreen view.

[arnowelzel]

Meanwhile I had time to implement a custom solution for my WordPress plugin "Lightbox with PhotoSwipe" which is mostly based on the way, how PhotoSwipe 4 does it, but also with some improvements and some simplifactions. For example I don't check for running animations in the browser before chaning the hash since the respective event in PhotoSwipe 5 is only triggered after an animation is completed. Maybe checking for pushstate support in the global history object is also not needed any longer.

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

Or a link to a single image: https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe-5/#gid=1&pid=2

The solution is not perfect yet and may still have some glitches. I am not sure, if it is possible to provide this as PhotoSwipe plugin. But the code is open source:

https://github.com/arnowelzel/lightbox-photoswipe/blob/main/assets/ps5/frontend.js

The flow I have implemented:

When initializing PhotoSwipe, the URL is checked for an existig gid/pid hash and if this is the case, the lightbox will be opened for the given image - this is done by emulating a click into the image, since direct opening using PhotoSwipe did not work well.

In addition there is an handler for the PhotoSwipe "change" event which will add the parameters to the URL as hash. The first image will be added as new entry in the browser history, all subsequent changes will only replace the current hash, so a user can go "back" from the open lightbox at any time. For images which are opened using a direct link, the flag for "history needs to be changed" will be unset to avoid accidential back navigation when closing the image.

To avoid any confusion, when people use the "back" button when the lightbox is still open, this will also be handled by detecting changes in the URL hash. In addition this code also handles the "forward" action - so if a user goes forward again to the URL with the image hash, the lightbox will also be opened again, to keep the navigation logic intact.

When the lightbox closed (either actively or indirect by the hash change handler), and the browser history was changed, the original URL is restored by going back one position in the browser history. If the history was not changed - for example because the image was opened using a direct link - then only the URL fragment will be removed.