主页 / 问题 / 1510860
Accepted
steep
Asked:2023-04-05 16:34:03 +0800 CST2023-04-05 16:34:03 +0800 CST

如何连接lightGallery？

  • 772

你需要在一个页面上连接多个画廊，只有第一个使用id，这是可以理解的。而且我不能切换到课程，这是行不通的。

<div id="gallery">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    ...
</div>

<div id="gallery">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    ...
</div>

<script>
lightGallery(document.getElementById('gallery'), {
...
});
</script>

代码笔上的例子

javascript

1 个回答

  1. Best Answer

    此问题的一种可能解决方案是为每个画廊容器使用唯一的 ID 名称，并为每个单独的 ID 调用 lightGallery() 函数。或者，您可以使用类选择器来定位所有画廊容器并循环遍历它们以将 lightGallery() 函数应用于每个容器。

    以下是如何实施第一个解决方案的示例：

    <div id="gallery1">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    ...
</div>

<div id="gallery2">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    ...
</div>

<script>
lightGallery(document.getElementById('gallery1'), {
...
});

lightGallery(document.getElementById('gallery2'), {
...
});
</script>

    或者，这里有一个示例，说明如何使用类选择器实现第二种解决方案：

    <div class="gallery">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    ...
</div>

<div class="gallery">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    ...
</div>

<script>
const galleries = document.querySelectorAll('.gallery');
for (let i = 0; i < galleries.length; i++) {
  lightGallery(galleries[i], {
    ...
  });
}
</script>
    • 0

相关问题