If we have 2 images in gallery

<div class="gg-box">
    <img src="img/1.jpg">
    <img src="img/2.jpg">
</div>

and then:

1. open first image and click next button (prev button is hiding but it should not)
2. open last image and click prev button (next button is hiding but it should not)

I made two different configurations at the end of the main.js file:

gridGallery({
 selector: "#main",
 darkMode: false,
 layout: "square",
 gapLength: 0,
 rowHeight: 500,
 columnWidth: 400
});

gridGallery({
 selector: "#main-vertical",
 darkMode: false,
 layout: "vertical",
 gapLength: 1,
 rowHeight: 800,
 columnWidth: 400
});

However, only the top (selector "main") configuration will be loaded.
I want to apply ONLY the second, vertical configuration to my gallery:

     <div class="gg-box" id="main-vertical">
                        <img src="resources/picture/cr1.jpg">
                        <img src="resources/picture/cr2.jpg">
                    </div>

It will just load the square "main" gallery, though...
Any way to get around this?

Thanks!

Hi, tested on PC OK, but on my iPhone 4s touch on tumbnail does nothing. I just see the gallery, but cannot open individual images.

Firstly thank you for creating this. Absolutely love it!

Feature Request : Ability to specify a thumbnail/small image with a full size image as a popup instead of using full size images as thumbnails. Possibly using data-* attributes for the source of the large image?

<div class="gg-container">
  <div class="gg-box"> 
    <img src="img/thumb/your-image-1-sm.jpg" data-gg-src="img/your-image-1.jpg">
    <img src="img/thumb/your-image-2-sm.jpg" data-gg-src="img/your-image-2.jpg">
    <img src="img/thumb/your-image-3-sm.jpg" data-gg-src="img/your-image-3.jpg">
  </div>
</div>

Hello,

This a great library. I was wondering if its possible to directly read images from a given folder without specifying the name in the index.html file? Basically, I would like to just put some images in a folder (no fixed format for the name, but must have the same extension like .jpg) and then specify the folder in the index.html file.

P.S.: I am very new to this and have no experience with either HTML and/or javascript, so apologies if the question seems too trivial.

In some cases we need to dynamically write out the script tag for grid-gallery.js (e.g., when used in modals). In this case, if the container is destroyed and recreated, it will throw an "Uncaught SyntaxError: Identifier 'root' has already been declared" error because the constant root is still in memory.

Steps to reproduce:

1. Go to https://codepen.io/thdoan/pen/yLjjLPw
2. Launch the modal
3. Close the modal (click on empty space below)
4. Launch the modal
5. Observe the JS error in the console

Fix: wrap everything in an IIFE to preserve variable scope.

(() => {
  const root = document.querySelector("body, html");
  ...
})();

Hello ,
thanks for the great stuff , i 've used it and it quite and clean :)
is there any option object , that i can pass properties in to control some aspects for this gallery, something like number of images in rows , or the width of the images and so on .
that would be a great addition.

Hello,
Is there a way I can show complete image but at smaller scale?

Thanks!