Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to change hash upon close #81

Open
sayontan opened this issue Apr 10, 2022 · 0 comments
Open

Unable to change hash upon close #81

sayontan opened this issue Apr 10, 2022 · 0 comments

Comments

@sayontan
Copy link

Hello,
Firstly, I would like to thank you for an exceptional lightbox! I am the author of a WordPress plugin that lets you use a variety of lightbox scripts with custom galleries, and I have found Spotlight to be the best lightbox, hands-down! It offers more features than lightboxes that are 5 times heavier than it, and it looks fantastic too.

Now, to the problem I am facing.

As a part of my script, I have a custom hash functionality. I generate a hash based on which photo is being clicked or navigated to, and I change the browser's location.hash using this.

In case of Spotlight, I have the hash tied to the onchange event. This works well: I am able to see a hash come up when I click on a thumbnail, and as I navigate, I can see the hash being modified. However, the problem occurs when I try to close the lightbox. I have code in the onclose event, which sets location.hash to an empty string, but for some reason, this is not shown in the browser. I tried printing the value in my code after I am blanking out the hash, and that prints the correct value, but in the browser's address bar, I am still seeing the hash. I am not sure if the fix you put in for #17 somehow is conflicting with this.

I also see some code in your close function that says history.go(hashchange === true ? -1 : -2). This might be causing the conflict too, though I am not sure.

For reference, this is the type of code that I have:

			spotlight.show(gallery, {
				index: index + 1,
				infinite: true,
				autoslide: true,
				play: 5,
				download: true,
				autohide: true,
				onchange: (idx, options) => {
					const current = gallery[idx - 1]; // idx is 1-based, not 0-based
					const title = document.querySelector("#spotlight .spl-title");
					title.innerHTML = current.title;
					self.setHash(current.deep); // "setHash" is a custom function, "self" is assigned before this code block, and "deep" has the deep-link / hash.
				},
				onclose: (idx) => {
					self.unsetHash(); 
					/* for the above, I have tried:
						history.replaceState({}, document.title, location.href.substr(0, location.href.length-location.hash.length));
					And:
						window.location.hash = '';
					Neither seems to work */
				}
			});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant