lightgallery markup trouble with justified image grid

Question

Hi I am having trouble implementing the lightgalley lightbox with my JIG galleries. The JIG generated gallery code looks like this:

HTML

<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 class="jig-imageContainer jig-contentID-ML-1192 jig-last">
        <div class="jig-overflow" style="opacity: 1; width: 634px; height: 448px;">
          <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-imgp1915.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-imgp1915.jpg&amp;h=1040&amp;w=1472&amp;q=45&amp;f=.jpg" width="634" height="448" style="width: 634px; height: 448px; margin-top: 0px;"></a>
          </div>
        </div>

Following the guidelines ( http://sachinchoolur.github.io/lightGallery/demos/html-markup.html ) I tried the following codes without success. When I click on a gallery item lightgallery is not loaded:

JS

<script type="text/javascript">
    $(document).ready(function() {
      $('.justified-image-grid').lightGallery({
        selector: '.lulz'
      });
});
</script>


<script type="text/javascript">
      $('.justified-image-grid').lightGallery({
        selector: '.lulz'
      });
</script>

<script type="text/javascript">
      $('.justified-image-grid').lightGallery();
</script>

<script type="text/javascript">
      $('#jig2').lightGallery();
</script>

I can load lightgallery but it won't display images with this JIG default setting for custom lightboxes:

<script type="text/javascript">
          $('#jig2 a.jig-link').lightGallery();
</script>

Or load a single image in the gallery

<script type="text/javascript">
          $('.lulz').lightGallery({
            selector: 'this'
   });
</script>

Also replicating the demos works.. I got it working last week but my coding progress was lost. So I know there must be a solution, I just cannot find it again.

please check the follow up question here: http://stackoverflow.com/questions/34106608/multiple-justified-image-grid-galleries-custom-lightbox-call-markup-with-lig — florian, Dec 05 '15 at 14:29

score 0 · Answer 1 · answered Dec 05 '15 at 14:10

solved, I found another lightgallery markup in my code which I probably forgot to delete.

now this code works when used as jig's custom lightbox call:

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

and

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

works too. However I it only works for the first gallery on the page subsequent ones do not load even when using

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

score 0 · Answer 2 · answered Dec 05 '15 at 18:18

0

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

To JIG Settings > Lightboxes tab > Custom lightbox JS call.

answered Dec 05 '15 at 18:18

Firsh - justifiedgrid.com

5,389
3
29
34

Hi Firsh, ty for your time. This was indeed the first thing I tried after following your examples, but it seems incompatible with lightgallery and does not even open the lightbox or display images. I found a solution (see answer above), but now struggle with this problem here: http://stackoverflow.com/questions/34106608/multiple-justified-image-grid-galleries-custom-lightbox-call-markup-with-lig – florian Dec 05 '15 at 18:26

lightgallery markup trouble with justified image grid

2 Answers2