1

プラグイン Lightgallery ハッシュを実行できません。私の願いは、同じページに 2 つのギャラリーを配置し、ボタンをクリックするともう一方のギャラリーが表示されるようにすることです。私が間違っていなければ、プラグインはこれを行うべきです。

この 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>

これは正しいですか、何か間違っていますか?

4

2 に答える 2

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>
于 2016-02-27T16:13:25.283 に答える
0

まず、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
    });
})
于 2019-03-13T23:39:58.097 に答える