javascriptlightgalleryhtmlcollectionlightgallery-2

Lightgallery v2 multiple instances

This library has an example to build a gallery based on element ID:

lightGallery(document.getElementById('lightgallery'), {
    plugins: [lgZoom, lgThumbnail],
    speed: 500,
    ... other settings
});

I want to build several instances based on a class. I tried to iterate a collection:

import lightGallery from 'lightgallery';

let galleries = document.getElementsByClassName('lightbox');

for (const gal of galleries) {
  lightGallery(gal), {
    selector: 'a',
  }
}

But it doesn't work. I get this error (despite the HTML element has an a element with img inside): lightGallery :- data-src is not provided on slide item 1. Please make sure the selector property is properly configured.

How can I build these galleries from an HTML collection?

Solution

  • Just creating IDs on the way:

    let galerias = document.getElementsByClassName('lightbox');

for (let i = 0; i < galerias.length; i++) {

  galerias[i].id = 'gal' + i; // <-------------------- creating IDs here

  lightGallery(document.getElementById('gal' + i), {
    selector: 'a',
  });

}