javascript - Lightgallery v2 多实例

Question

这个库有一个基于元素 ID 构建画廊的示例：

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 元素内部有一个a元素img）：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',
  });

}