Is it possible to have several galleries on one page using setElements vs divs in the html?

[mGumberson]

I apologize in advance for asking this question directly on GitHub. I've been searching for an answer for two days now on the GitHub discussions, then StackOverflow, CodePen, CodeSandbox, Reddit, Google and more. No luck.
I'm trying to set up several Glightbox galleries on one page (each with compeltely different images from the others) using the setElements in the .js versus adding a billion divs in the html.
Using the README.md I was able to get this to work for one gallery:

var myGallery = GLightbox({
    elements: [],
});

myGallery.setElements([ {
            'href': 'https://site.com/gallery1/img1.jpg',
        },
        {
            href': 'https://site.com/gallery1/img2.jpg',
        },
        {
           etc,
        }]);

var galleryImg = document.querySelector('.glightbox');

galleryImg.addEventListener('click', function() {
  console.log('Image clicked!');
  myGallery.open();
});

I tried myGallery1, myGallery2, etc. But that did not work. I also tried:

var myGallery = GLightbox({
    selector: ['data-gallery'='.gallery1'],
    elements: [
          {
            'href': 'https://site.com/gallery1/img1.jpg',
        },
],
});

But I think that selector and elements are exclusive of each other?
If what I'd like to do is not possible, that's fine, that way I can at least stop searching and go with this (and add all the images into divs/classes in the html):

var lightbox = GLightbox();
            lightbox.on('open', (target) => {
                console.log('lightbox opened');
            });
            var lightboxGallery1 = GLightbox({
                selector: '.glightbox1',
            });
            var lightboxGallery2 = GLightbox({
                selector: '.glightbox2'
            });
            var lightboxGallery3 = GLightbox({
                selector: '.glightbox3'
            });
Much thanks in advance!

[gingerchew]

Hey there @mGumberson

To make multiple galleries you would do like you have in the last example, but with the elements property.

Here's a pen that demonstrates what I mean: https://codepen.io/gingerchew/pen/XJJQBdg/87dc29ec16a655ef1b09ceed1c235756?editors=0010

Instead of looking for a selector, you just have multiple "instances" of GLightbox, each one in charge of controlling a single gallery.

Hope that helps!

[mGumberson]

Brilliant! Thank you @gingerchew!
I thought I would show my working example here, too, as it may help someone else. It should work as long as the individual gallery folders are named sequentially.
First:

<div data-gallery="data-gallery-1"></div>
<div data-gallery="data-gallery-2"></div>

Then:

const galleries = new Map();
const gLightGallery = document.querySelectorAll(`[data-gallery*="data-gallery"]`);
for (let i = 0;i < 4;i++) {
	galleries.set(gLightGallery[i], GLightbox({
		elements: [
			{ href: `https://anywebsite.com/gallery${i + 1}/1.jpg` },
			{ href: `https://anywebsite.com/gallery${i + 1}/2.jpg` },
			{ href: `https://anywebsite.com/gallery${i + 1}/3.jpg` },
			{ href: `https://anywebsite.com/gallery${i + 1}/4.jpg` },
		],
	}))
}


document.addEventListener('click', ({ target }) => {
	if (!galleries.has(target)) return;
	galleries.get(target)?.open();
})       

I don't doubt that there is a more elegant solution than to simply list each sequential image file; but I only had four for each gallery.
Thanks again, @gingerchew, for your help!