0

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

3
  • на классы не могу переключить, не работает - в codepen примере всё работает
    – InDevX
    5 апр в 8:41
  • работает только первый блок, второй нет
    – steep
    5 апр в 9:01
  • @steep вам же дали внизу пример. посмотрите, там реализован вызов по классу 5 апр в 9:57

1 ответ 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>
1
  • Второй вариант я написал и тут смотрю у вас он точь в точь написан, пришлось удалять)) 5 апр в 9:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.