[v2, hash] navigate to different slides via browser back/forward buttons not working

[miedzikd]

Description

Navigate to different slides via browser back/forward buttons not working
When the lgHash plugin is enabled, changing slides creates new hashes, but pressing the back/forward buttons does not change the slides or closes the gallery, but completely reloads the page

Steps to reproduce

1. Enable hash plugin
2. Open gallery
3. Click forward 3 times
4. Click browser back button

Demo:
https://www.lightgalleryjs.com/demos/hash/

Expected result

You should see the previous slide, not close the gallery. On the other hand, when you pressed back on the first slide, the gallery should close but the page should not reload

Actual result

Page is reload

Additional context

Love your work and version 2 ;)

[sachinchoolur]

The primary role of the hash plugin is to provide an option to share slides via URL. We already have multiple options for navigating between slides and closing the gallery. If you really want to navigate slides via the browser back button, for now, you can fork the repo and replace the replaceState with pushState.

Let me know what you think

[miedzikd]

Thanks @sachinchoolur for the explanations and tips :)

I don't think it's important for desktops ... but for mobile devices ... opening the gallery looks like going to a new page. Sometimes it is easier than looking for the X (which disappears after a few seconds) it is easier to make "undo gesture" or click the "undo arrow". Then, however, the user lands in a completely different place. Especially if he just came from Google to the SPA website ... In this case you will return to the search results.

Please consider this one more time... Mabe you can add a new option for hash plugin?

Best Regards :)
Daniel

[pbotas]

I think this is very important especially for mobile and SPAs like @miedzikd said, but I'm sure there are many use cases where this would be useful.

[sachinchoolur]

I'll try to add a new option in the hash plugin as @miedzikd suggested.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[miedzikd]

any news @sachinchoolur ?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[miedzikd]

any news @sachinchoolur ?

[petko]

Any updates on this one?

[peamak]

I don't really know what I'm doing here but I wanted the back button (especially on mobiles) to close the gallery and not actually go back to the previous page and here's what I added to my code.

Before initializing LightGallery:

myGalleryElement.addEventListener('lgBeforeOpen', () => { window.history.pushState('#lgopen', 'Gallery opened'); });

The 2 arguments of pushState() can be whatever you want because they're not really used, except to trick the browser in thinking there's another entry in history.
As I said, this may not be a good option or the right way to do it but I don't know JS and it seems to do what I want.

Hope it helps.

[irian-codes]

I don't really know what I'm doing here but I wanted the back button (especially on mobiles) to close the gallery and not actually go back to the previous page and here's what I added to my code.

Before initializing LightGallery:

myGalleryElement.addEventListener('lgBeforeOpen', () => { window.history.pushState('#lgopen', 'Gallery opened'); });

The 2 arguments of pushState() can be whatever you want because they're not really used, except to trick the browser in thinking there's another entry in history. As I said, this may not be a good option or the right way to do it but I don't know JS and it seems to do what I want.

Hope it helps.

This worked wonders! Thanks! I hope there's a solution to this in the future because the docs specifically say

It allows you to navigate to different slides via browser back/forward buttons too. (source)

And it doesn't work either.