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

Thumbnails not showing up, but images are loaded #317

Closed
Zenahr opened this issue Dec 25, 2020 · 5 comments
Closed

Thumbnails not showing up, but images are loaded #317

Zenahr opened this issue Dec 25, 2020 · 5 comments
Labels
help wanted

Comments

@Zenahr
Copy link

Zenahr commented Dec 25, 2020

Environment

Windows 10
tested with Firefox and Chrome

Description

The lightbox renders images correctly, but the overview doesn't show anything.

image
(overview)

image
(single-image view)

This is my current code:

<html>
  <head>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/jquery.nanogallery2.min.js"></script>

  </head>
  <body>

    <h1>Gallery made with nanogallery2</h1>

    <div ID="ngy2p" data-nanogallery2='{
        "itemsBaseURL": ".\assets\gallery\",
        "thumbnailWidth": "200",
        "thumbnailLabel": {
          "position": "overImageOnBottom"
        },
        "thumbnailAlignment": "center",
        "thumbnailOpenImage": true
      }'>
      
      <a href=".\assets\gallery\snap-2020-07-29-22h43m21s220.png" data-ngthumb=".\assets\gallery\snap-2020-07-29-22h43m21s220.png" data-ngdesc="">
        <!-- .\assets\gallery\snap-2020-07-29-22h43m21s220.png -->
      </a>
      
      <a href=".\assets\gallery\snap-2020-07-29-22h43m23s005.png" data-ngthumb=".\assets\gallery\snap-2020-07-29-22h43m23s005.png" data-ngdesc="">
        <!-- .\assets\gallery\snap-2020-07-29-22h43m23s005.png -->
      </a>
      
      <a href=".\assets\gallery\snap-2020-07-30-01h59m55s629.png" data-ngthumb=".\assets\gallery\snap-2020-07-30-01h59m55s629.png" data-ngdesc="">
        <!-- .\assets\gallery\snap-2020-07-30-01h59m55s629.png -->
      </a>
      
      <a href=".\assets\gallery\snap-2020-08-01-12h33m52s084.png" data-ngthumb=".\assets\gallery\snap-2020-08-01-12h33m52s084.png" data-ngdesc="">
        <!-- .\assets\gallery\snap-2020-08-01-12h33m52s084.png -->
      </a>
      
      <a href=".\assets\gallery\snap-2020-08-01-13h07m23s808.png" data-ngthumb=".\assets\gallery\snap-2020-08-01-13h07m23s808.png" data-ngdesc="">
        <!-- .\assets\gallery\snap-2020-08-01-13h07m23s808.png -->
      </a>
      
    </div>
    
  </body>
</html>

Additional Notes

If I remove the full path from the hrefs the images do not load at all.
@Kris-B
Copy link
Member

Kris-B commented Dec 29, 2020

Could you please create a codepen or a jsfiddle to reproduce your issue?

@Zenahr
Copy link
Author

Zenahr commented Dec 30, 2020 •
edited
Loading

@Kris-B well it works in codepen with externally loaded images via a cdn. But I'm having problems with locally hosted images inside a folder like assets.

https://codepen.io/zenmatica/pen/WNGMbLB

@Zenahr
Copy link
Author

Zenahr commented Dec 30, 2020

@Kris-B I've made a repository for you to check out. It's all ready and set. I think that's the best way to reproduce the issue since this reflects my development setup correctly.

https://github.com/Zenahr/temp-nano2-debug

@Kris-B
Copy link
Member

Kris-B commented Jan 6, 2021

Thanks for the repo. I could find the issue: backslashes in paths when used in CSS.
fixed in v3.0.5

@Zenahr
Copy link
Author

Zenahr commented Jan 12, 2021 •
edited
Loading

@Kris-B meaning without updating all I have to do is having ./assets/gallery/snap-2020-08-01-12h33m52s084.png instead of .\assets\gallery\snap-2020-08-01-12h33m52s084.png?

I will mark this issue as closed in any case since the update to v3.0.5 has already been pushed.

@Zenahr Zenahr closed this as completed Jan 12, 2021
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
@Kris-B @Zenahr