Want back button to close lightbox instead of going back a page.

[garretwilson]

I'm using the lightbox in nanogallery2 3.0.4 from my own gallery. It looks like this:

…
<script src=".…/js/jquery-3.5.1.min.js" type="text/javascript"></script>
<link href=".…/js/nanogallery2/3.0.5/css/nanogallery2.min.css" rel="stylesheet" type="text/css" />
<script src=".…/js/nanogallery2/3.0.5/jquery.nanogallery2.min.js" type="text/javascript"></script>
…
<img src="my-pic-preview.jpg" data-ngsrc="my-pic.jpg" data-nanogallery2-lightbox />

I've managed to get this looking really nice! It is wonderful!

There's one little navigation problem that I fear will be a big stumbling block for users, though. When viewing the lightbox, if a user clicks the "Back" button it goes back to a previous page. But I have other subfolders on the same page, and the user completely gets lost if they wind up on another page when they just wanted to close the lightbox. This is especially problematic on mobile devices, where the OS "back" functionality is almost part of muscle memory.

How can I tell configure lightbox to simply close when the user presses the "Back" button (or the OS system "back" button on e.g. Android), rather than navigating to the previous page?

[garretwilson]

Is there any way this can be addressed? This is a significant usability issue that is marring an otherwise excellent product.

I have a couple of sites up using nanogallery2, but I'm afraid to publicize them because the user experience is so jarring. The user enters the gallery and starts browsing photos in the lightbox, but when they hit the "back" button on their mobile phone or on the browser, they are kicked off my site altogether because the browser goes "back" to the previous page!

Kicking a user off my site altogether when the users naturally press "back" attempting to exit the lightroom is a severe problem.

I went to the support page, ready to purchase a commercial license (even though I'm not even using it in a commercial project yet) in an attempt to get some support, but on that page it says:

support is actually not available …

So I can't even pay to get this significant usability issue addressed now?

[joseadrian]

I went to the support page, ready to purchase a commercial license (even though I'm not even using it in a commercial project yet) in an attempt to get some support, but on that page it says:

Did you get any response? What does one do in these cases? Just use it? My client has contacted them to try and buy one license but no response yet.

[joseadrian]

If anyone wants to fix their issue with the back button, though not the best solution but I just came up with this:

    // I am not relying on the  lightboxImageDisplayed.nanogallery2 event 
    // it takes some seconds to fire, I guess it fires when the image finishes loading?
    // https://nanogallery2.nanostudio.org/api.html
    // Rather when the users clicks an image
    jQuery("PUT_YOUR_GALLERY_ITEM_SELECTOR_HERE").on('click', function() {
        window.history.pushState(null, null, window.location.pathname); // Adding a state to the history?
    }); 

    // When the user presses the hardware back button or the back button history in the desktop browser
    // Close the lightbox
    window.addEventListener('popstate', function(event) {
        jQuery('.closeButton').trigger('click'); 
        // $('SELECTOR').nanogallery2('closeViewer');
        // I'm not using the gallery, that must be why I couldn't make the line above to work
    }, false);

Later I will read their code more carefully because it seems they are handling the history and maybe what I did is unneccesary; but also want to fix and add other stuff https://github.com/nanostudio-org/nanogallery2/blob/bc9bf84fa599ebc9ed5575bb04f61acda901b883/dist/jquery.nanogallery2.js#L10623-L10670

[garretwilson]

Did you get any response? What does one do in these cases? Just use it? My client has contacted them to try and buy one license but no response yet.

I have received no response.

[garretwilson]

@joseadrian do you think you can fix this? How much would you charge? I could pay via BountySource or similar.

Do we need to fork this?

[donjan]

@joseadrian Thank you for this nice solution. It might seem a bit patchy, but locationHash doesn't work for me, yet simply keeping your JS in my HTML template does.

Edit: if you, as I do, have additional GET parameters (?foo=x) in your address bar, you need to add the window.location.search part of the URL as well, or they will get removed:

    jQuery("PUT_YOUR_GALLERY_ITEM_SELECTOR_HERE").on('click', function() {
        window.history.pushState(null, null, window.location.pathname + window.location.search); // Adding a state to the history?
    });