lightgallery.js несколько экземпляров не работает

Question

Я пытаюсь использовать "LighGallery.js" на своей странице.

Ситуация: У меня есть несколько групп изображений, и каждая группа должна отображаться в собственной галерее. Для каждой группы отображается 1 изображение, а остальные скрыты и должны отображаться в галерее при нажатии первого видимого изображения.

Задача: Галерея запускает только первую категорию. Это не вызывает просмотр галереи для остальных изображений.

Вопрос: Как использовать несколько экземпляров галерей. Я не могу понять это из документации. Кто-нибудь работал над этим раньше?

То, что я пробовал: Я читал вокруг и попытался с помощью Hash плагин, который поставляется вместе. Он по-прежнему не работает:

структуры Код:

HTML:

<div class="topleft"> 
    <!--Gallery 1st picture triggers--> 
    <ul> 
    <li> 
     <a class="gthumbnail gallery1" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a> 
    </li> 
    <li> 
     <a class="gthumbnail gallery2" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a> 
    </li> 
    </ul> 
    <!-------------------> 

    <!--Individual galleries surrounded by DIVs--> 
    <div> 
    <a class="gallery1" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a> 
    <a class="gallery1" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a> 
    </div> 

    <div> 
    <a class="gallery2" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a> 
    <a class="gallery2" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a> 
    </div> 
    <!-------------------> 
</div> 

JS:

$(".topleft").lightGallery({ 
    thumbnail: true, 
    hash: true, 
    galleryId: "gallery1", 
    selector: '.gallery1' 
}); 

$(".topleft").lightGallery({ 
    thumbnail: true, 
    hash: true, 
    galleryId: "gallery2", 
    selector: '.gallery2' 
}); 

Спасибо вам

Answer 1

Вы должны использовать отличаются ent id для разных галерей на той же странице, потому что чтение на github, уже есть открытая проблема. для более детальной информации вы можете посмотреть здесь github

Answer 2

FIX:

<div class="topleft--g1"> 
<div class="topleft--g2"> 
    <!--Gallery 1st picture triggers--> 
    <ul> 
    <li> 
     <a class="gthumbnail gallery1" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a> 
    </li> 
    <li> 
     <a class="gthumbnail gallery2" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a> 
    </li> 
    </ul> 
</div> 
</div> 

---

$(".topleft--g1").lightGallery({ 
    thumbnail: true, 
    hash: true, 
    galleryId: "gallery1", 
    selector: '.gallery1' 
}); 

$(".topleft--g2").lightGallery({ 
    thumbnail: true, 
    hash: true, 
    galleryId: "gallery2", 
    selector: '.gallery2' 
}); 

P.S. hash: true < - удалите его. «Истина» по умолчанию https://sachinchoolur.github.io/lightGallery/docs/api.html#lg-hash