Lightgallery哈希插件中有多个画廊？答案

【问题标题】：Multiple galleries in Lightgallery hash plugin?Lightgallery哈希插件中有多个画廊？
【发布时间】：2015-09-03 13:31:01
【问题描述】：

我无法运行插件 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>

这是正确的还是有问题的？

【问题讨论】：

有什么问题？对我来说似乎是正确的。确保在此脚本之前加载了所有库。
问题是我出现两个画廊一个在另一个之上

标签： javascript jquery html gallery lightgallery

【解决方案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>

【讨论】：

不要只提供解决问题的代码。还提供一点解释为什么它可以解决问题以及如何解决问题。
我刚刚删除了“;”并添加了“,”来分隔函数中的参数。

【解决方案2】：

首先，您应该通过类而不是 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>

然后用特定的类循环每个并启动 lightGallery()

$('.lightgallery').each(function (index) {
    $('#' + this.id).lightGallery({
        share: false,
        galleryId: index
    });
})

【讨论】：