Несколько галерей в хэш плагине Lightgallery?

Я не могу запустить плагин Lightgallery хэш. Я хочу, чтобы на одной странице было две галереи, а при нажатии на кнопку должна отображаться другая. Если я не ошибаюсь, плагин должен сделать это.

Я добавил эту структуру HTML:

<div id="hash">
<a href="img/img_port/reportage/img-1.jpg">
    <img src="img/img_port/reportage/thumb-1.jpg" />
</a>
<a href="img/img_port/reportage/img-2.jpg">
    <img src="img/img_port/reportage/thumb-2.jpg" />
</a>
<a href="img/img_port/reportage/img-3.jpg">
    <img src="img/img_port/reportage/thumb-3.jpg" />
</a>
<a href="img/img_port/reportage/img-4.jpg">
    <img src="img/img_port/reportage/thumb-4.jpg" />
</a>


<div id="hash2">   
<a href="img/img_port/reportage/img-1.jpg">
    <img src="img/img_port/reportage/thumb-1.jpg" />
</a>
<a href="img/img_port/reportage/img-2.jpg">
    <img src="img/img_port/reportage/thumb-2.jpg" />
</a>
<a href="img/img_port/reportage/img-3.jpg">
    <img src="img/img_port/reportage/thumb-3.jpg" />
</a>
<a href="img/img_port/reportage/img-4.jpg">
    <img src="img/img_port/reportage/thumb-4.jpg" />
</a>

И это Javascript:

<script type="text/javascript">
        $(document).ready(function() {
            $("#hash").lightGallery({
                download: false,
                counter: false,
                hash: true;
                galleryId: 1
                });
            $("#hash2").lightGallery({
                download: false,
                counter: false,
                hash: true;
                galleryId: 2
                    });
            });
    </script>

Это правильно или что-то не так?

Источник

1 ответ

Решение
<script type="text/javascript">
    $(document).ready(function() {
        $("#hash").lightGallery({
            download: false,
            counter: false,
            hash: true,  /*Here is the error.*/
            galleryId: 1
            });
        $("#hash2").lightGallery({
            download: false,
            counter: false,
            hash: true,/*Here is the error.*/
            galleryId: 2
                });
        });
</script>
Источник

Во-первых, вы должны идентифицировать свою галерею по классу, а не по id.

<div class="lightgallery">
     <a href="img/img_port/reportage/img-1.jpg">
         <img src="img/img_port/reportage/thumb-1.jpg" />
     </a>
     <a href="img/img_port/reportage/img-2.jpg">
         <img src="img/img_port/reportage/thumb-2.jpg" />
     </a>
</div>

<div class="lightgallery">   
     <a href="img/img_port/reportage/img-1.jpg">
         <img src="img/img_port/reportage/thumb-1.jpg" />
     </a>
     <a href="img/img_port/reportage/img-2.jpg">
         <img src="img/img_port/reportage/thumb-2.jpg" />
     </a>
</div>

Затем в JavaScript вы получите ссылку на все элементы с этим классом

var galleries = document.getElementsByClassName('lightgallery');

Затем зациклите каждый из них и начните

for(let i = 0 ; i < galleries.length; i++){
      lightGallery(galleries[i],{
          thumbnail:true,
          share: false,
          download: false,
      })
  }
Источник
Другие вопросы по тегам