Как подключить lightGallery?

Question

Как подключить lightGallery?

Рейтинг: 0Ответов: 1Опубликовано: 05.04.2023

Нужно подключить несколько галерей на одной странице С 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>

пример на codepen

javascript jquery

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Одним из возможных решений этой проблемы может быть использование уникальных имен идентификаторов для каждого контейнера галереи и вызов функции 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>

Как подключить lightGallery?

Ответы