-
Notifications
You must be signed in to change notification settings - Fork 128
Description
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 */
}
});