History v5

[GitNomster]

Need to add "history" option, like in v4, to enable phone back button.

[dimsemenov]

Currently, there are no plans to add history module in the core of v5, so feel free to create it via API.

[htmltiger]

I was looking for the same, added the following code and seems doing the job

if (!history.state || !history.state.pswp || history.state.path !== window.location.pathname) {
 history.pushState({pswp: true, path: window.location.pathname}, null, window.location.pathname);
}
window.addEventListener('popstate', function (e) {
 if (typeof pswp==="object" && pswp && pswp.isOpen) {
  history.pushState({pswp: true,path: window.location.pathname}, null, window.location.pathname);
  pswp.close()
 } else {
  history.go(-1)
 }
});

[acwolff]

@htmltiger where should I insert your code and could you please give a link to a working example?

[htmltiger]

You can insert here in your page and check it if it works correctly, only insert once per page if you have multiple galleries.

<script type="module">
import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm.js';
const lightbox = new PhotoSwipeLightbox({
  gallery: '#my-gallery',
  children: 'a',
  pswpModule: () => import('photoswipe/dist/photoswipe.esm.js')
});
lightbox.init();

//back button fix begin
if (!history.state || !history.state.pswp || history.state.path !== window.location.pathname) {
 history.pushState({pswp: true, path: window.location.pathname}, null, window.location.pathname);
}
window.addEventListener('popstate', function (e) {
 if (typeof pswp==="object" && pswp && pswp.isOpen) {
  history.pushState({pswp: true,path: window.location.pathname}, null, window.location.pathname);
  pswp.close()
 } else {
  history.go(-1)
 }
});
//back button fix end

</script>

[acwolff]

@htmltiger, I did insert your code in this album, but I see no effect.

I thought to see an unique code in the URL field of the browser for each slide image, but I don't see that,

[htmltiger]

No idea why its not working in your page, https://codepen.io/htmltiger/pen/ExRgvqy remove the code at the end of js to see the change

Edit: its working fine in your page, make sure back button is not grayed out first Its not going to change addressbar url, just fixes back button, for eg. google > your page > full size > back button > your page (close image) without this google > your page > full size > back button > google

[acwolff]

@htmltiger, sorry I don't see a Back button in your Codepen example and have no idea how I can enable a Back button in my example. I see only the left arrow button in the browser on the left side of the URL field.

But I am only interested in an URL for each slide, so that I can make a link to a slide.

[htmltiger]

This doesn't do what you want, all this does is when you hit browser back button it closes slide, if its already closed it takes you back to the previous page

[xikeqian]

main operation: lightbox.value?.on('initialLayout', () => { console.log('initialLayout'); // add route stack on open pswp window.history.pushState( { isPswp: true, }, 'pswp', '#pswp' ); });

onMounted(() => { window.addEventListener('popstate', (ev) => { console.log('popstate', ev, lightbox.value?.pswp); if (lightbox.value) { lightbox.value.pswp.close(); } }); }); // this is vue syntax // lightbox.value = new PhotoSwipeLightbox({});

[merong]

$(document).ready(function() {
      const photo_swipe_options = {
          ....
      };

     const lightbox = new PhotoSwipeLightbox(photo_swipe_options);

     lightbox.on('afterInit', () => {
        const {pswp} = lightbox;

        console.log('afterInit');
        if(history.state) {
            // from popstate event
            history.replaceState({pswp_index: lightbox.index}, '');
        } else {
            history.pushState({pswp_index: lightbox.index}, '');
        }
      });

     lightbox.init();

      window.addEventListener('popstate', () => {

        const {pswp} = lightbox;
        if (typeof pswp==="object" && pswp && pswp.isOpen) {
            history.pushState({pswp: true,path: window.location.pathname}, null, window.location.pathname);
            pswp.close()
        } else {
            history.go(-1)
        }
    });

 });