Standalone Gallery always opens the first. Possible Solution

Standalone Viewer does not open the clicked image, but the first.

I'm using the latest 3.0.5 release. I have created a basic HTML file with 3 images to try out the standalone feature of nanogallery2. I already know that the regular use of it works very nicely.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Gallery</title>
    <link rel="stylesheet" href="css/nanogallery2.min.css">
</head>    
<body>
    <div id="gallery" data-nanogallery2-lightbox>
        <img id="10777" src="thumbs/10777.jpg" class="card-img-top" kind="image" alt="image" data-ngsrc="images/10777.jpg" data-nanogallery2-lightbox="">
        <img id="10779" src="thumbs/10779.jpg" class="card-img-top" kind="image" alt="image" data-ngsrc="images/10779.jpg" data-nanogallery2-lightbox="">
        <img id="10778" src="thumbs/10778.jpg" class="card-img-top" kind="image" alt="image" data-ngsrc="images/10778.jpg" data-nanogallery2-lightbox="">
    </div>
    <script type="text/javascript" src="lib/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="lib/jquery.nanogallery2.js"></script>
</body>
</html>

The problem is that, independent on which image I click, the standalone Viewer first opens that image, but then switches to the first image. You can only see this while stepping the debugger, because it is so fast. I tested this in FF and Chrome/Edge on Windows 11.

I have tracked down the problem to the click handler (line 1621) always being called twice, but the second time within the context of the outer gallery div instead of the clicked img. In the first call, the LightboxStandaloneDisplay() function correctly identifies the clicked thumbnail and calls LightboxOpen( displayIdx ) with a valid displayIdx (line 3105). The second time, displayIdx remains undefined and the call to LightboxOpen falls back to opening the first image.

I have no idea why the click event handler is called twice. But by adding

if (idx === undefined) {
  return;
}

at the start of LightboxOpen(idx) and changing the other call to LightboxOpen(0); in line 8437, the problem is fixed. Clicking a thumbnail now opens the correct image, despite the click handler being called twice.

I don't know if this is something I did wrong in my HTML (see above) because I'm new to nanogallery2. But maybe this is indeed a bug of sorts. Since I'm new to this library, I did not want to open a pull request, because I think it's likely that I did something stupid in my HTML.

nanostudio-org / nanogallery2

Standalone Gallery always opens the first. Possible Solution #376