Lightgallery v2多实例

Question

这个基于元素ID构建图库的库has an example：

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

我想基于一个类构建几个实例。我尝试迭代一个集合：

import lightGallery from 'lightgallery';

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

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

但它不起作用。我得到这个错误(尽管HTML元素有一个内部带有img的a元素)：lightGallery :- data-src is not provided on slide item 1. Please make sure the selector property is properly configured.

如何从HTML集合中构建这些图库？

Answer 1

只需在途中创建ID：

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',
  });

}