Lightgallery v2 多实例

Question

此库 has an example 用于根据元素 ID 构建图库：

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

我想基于 class 构建多个实例。我试图迭代 collection:

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 collection 构建这些画廊？

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

}

Lightgallery v2 多实例

Lightgallery v2 multiple instances

javascript

lightgallery

htmlcollection

lightgallery-2