multiple justified image grid galleries - custom lightbox call / markup with lightgallery

问题

Holla, I am using JIG to generate my galleries. Galleries have the following structure:

    <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&amp;h=1040&amp;w=1560&amp;q=45&amp;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&amp;h=1040&amp;w=1456&amp;q=45&amp;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&amp;h=1040&amp;w=1560&amp;q=45&amp;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&amp;h=1040&amp;w=1456&amp;q=45&amp;f=.jpg" width="614" height="439" style="width: 614px; height: 439px; margin-top: 0px;"></a>
        </div>
      </div>
        </div>

The galleries can be identified using the ID tags e.g. "jig1, jig2 and so on.."

Now how to call the lightbox for each gallery?

This works only for the first gallery

$('.justified-image-grid').lightGallery({
selector: '.lulz'
});

Alternatively I can use:

$('#jig1').lightGallery({
selector: '.lulz'
});

Interestingly even this does not load the lightbox for the second gallery?

$('#jig2').lightGallery({
selector: '.lulz'
});

来源：https://stackoverflow.com/questions/34106608/multiple-justified-image-grid-galleries-custom-lightbox-call-markup-with-lig

标签

javascript

jquery

html

lightgallery