Holla、私は自分のギャラリーを生成するために JIG を使用しています。ギャラリーには次の構造があります。
<div id="jig1" class="justified-image-grid jig-eec93aceb26f618c747e9fe2abded7ce jig-preset-c1" style="width: 1278px;">
<div class="jig-imageContainer jig-contentID-ML-1191">
<div class="jig-overflow" style="opacity: 1; width: 658px; height: 438px;">
<a class="jig-link lulz jig-loaded" rel="jig[2]" test="lala" href="http://127.0.0.1/wp/wp-content/uploads/2014/11/untitled-imgp1913.jpg">
<img src="http://127.0.0.1/wp/wp-content/plugins/justified-image-grid/timthumb.php?src=http%3A%2F%2F127.0.0.1%2Fwp%2Fwp-content%2Fuploads%2F2014%2F11%2Funtitled-imgp1913.jpg&h=1040&w=1560&q=45&f=.jpg" width="658" height="439" style="width: 658px; height: 439px; margin-top: 0px;"></a>
</div>
</div>
<div class="jig-imageContainer jig-contentID-ML-1190 jig-last">
<div class="jig-overflow" style="opacity: 1; width: 614px; height: 438px;">
<a class="jig-link lulz jig-loaded" rel="jig[2]" test="lala" href="http://127.0.0.1/wp/wp-content/uploads/2014/11/untitled-imgp1912.jpg">
<img src="http://127.0.0.1/wp/wp-content/plugins/justified-image-grid/timthumb.php?src=http%3A%2F%2F127.0.0.1%2Fwp%2Fwp-content%2Fuploads%2F2014%2F11%2Funtitled-imgp1912.jpg&h=1040&w=1456&q=45&f=.jpg" width="614" height="439" style="width: 614px; height: 439px; margin-top: 0px;"></a>
</div>
</div>
</div>
...
<div id="jig2" class="justified-image-grid jig-eec93aceb26f618c747e9fe2abded7ce jig-preset-c1" style="width: 1278px;">
<div class="jig-imageContainer jig-contentID-ML-1191">
<div class="jig-overflow" style="opacity: 1; width: 658px; height: 438px;">
<a class="jig-link lulz jig-loaded" rel="jig[2]" test="lala" href="http://127.0.0.1/wp/wp-content/uploads/2014/11/untitled-imgp1913.jpg">
<img src="http://127.0.0.1/wp/wp-content/plugins/justified-image-grid/timthumb.php?src=http%3A%2F%2F127.0.0.1%2Fwp%2Fwp-content%2Fuploads%2F2014%2F11%2Funtitled-imgp1913.jpg&h=1040&w=1560&q=45&f=.jpg" width="658" height="439" style="width: 658px; height: 439px; margin-top: 0px;"></a>
</div>
</div>
<div class="jig-imageContainer jig-contentID-ML-1190 jig-last">
<div class="jig-overflow" style="opacity: 1; width: 614px; height: 438px;">
<a class="jig-link lulz jig-loaded" rel="jig[2]" test="lala" href="http://127.0.0.1/wp/wp-content/uploads/2014/11/untitled-imgp1912.jpg">
<img src="http://127.0.0.1/wp/wp-content/plugins/justified-image-grid/timthumb.php?src=http%3A%2F%2F127.0.0.1%2Fwp%2Fwp-content%2Fuploads%2F2014%2F11%2Funtitled-imgp1912.jpg&h=1040&w=1456&q=45&f=.jpg" width="614" height="439" style="width: 614px; height: 439px; margin-top: 0px;"></a>
</div>
</div>
</div>
ギャラリーは、「jig1、jig2 など」などの ID タグを使用して識別できます。
各ギャラリーのライトボックスを呼び出す方法は?
これは最初のギャラリーでのみ機能します
$('.justified-image-grid').lightGallery({
selector: '.lulz'
});
または、次を使用できます。
$('#jig1').lightGallery({
selector: '.lulz'
});
興味深いことに、これでも 2 番目のギャラリーのライトボックスが読み込まれませんか?
$('#jig2').lightGallery({
selector: '.lulz'
});