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.

Sign up for GitHub

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

Jump to bottom

Standalone Gallery always opens the first. Possible Solution #376

Open
mwegithub opened this issue May 17, 2022 · 1 comment
Open

Standalone Gallery always opens the first. Possible Solution #376

mwegithub opened this issue May 17, 2022 · 1 comment
Labels
help wanted

Comments

@mwegithub
Copy link

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.
@AntSmith60
Copy link

I don't think you need data-nanogallery2-lightbox attribute in the containing div of these images.

Galleries are grouped within a div that has the data-nanogallery2 attribute, but standalone images each take their own lightbox definition (as you have for them).

Maybe removing that attribute from the DIV will help?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
help wanted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mwegithub @AntSmith60