Skip to content

Unable to change hash upon close #81

@sayontan

Description

@sayontan

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 */
				}
			});

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions