Destroy and reinitialize lightGallery/Isotope gallery after filtering

Question

I am using lightGallery (v1.3.8) plus Isotope (v3.0.2) to build a photo gallery in a Bootstrap tab page. Lighgallery is unable to display the photo enlargements after the user clicks any of the isotope filters and produces the JS error: "Cannot read property 'match' of undefined".

The problem appears to be connected with the destroy() command. If I remove this, the gallery works when filters are selected, but lightgallery shows the full library rather than just the filtered result.

imagesLoaded() is used because the images were overlapping on initial load. This may be due to the gallery having over 70 images.

JSFiddle https://jsfiddle.net/1qghLkuh/ demonstrates the problem. The HTML I'm using is:

<ul class="isogallery">
   <li class="filter active" data-filter="*"><a href="#">Show All</a></li>
   <li class="filter" data-filter=".gp1"><a href="#">Group 1</a></li>
   <li class="filter" data-filter=".gp2"><a href="#">Group 2</a></li>
   <li class="filter" data-filter=".gp3"><a href="#">Group 3</a></li>
</ul>
<div class="row" id="gallery">
    <div class="col-xs-6 gallery-item gp1">
        <a class="img-thumbnail" href="https://s24.postimg.org/x8ib1yret/test1.jpg" data-sub-html="Photo caption 1"><img class="img-responsive" src="https://s24.postimg.org/x8ib1yret/test1.jpg" alt="photo 1" width="200" height="150">
        </a>
    </div>
    <div class="col-xs-6 gallery-item gp2">
        <a class="img-thumbnail" href="https://s24.postimg.org/9rxznue8l/test2.jpg" data-sub-html="Photo caption 2"><img class="img-responsive" src="https://s24.postimg.org/9rxznue8l/test2.jpg" alt="photo 2" width="200" height="150">
        </a>
    </div>
    <div class="col-xs-6 gallery-item gp3">
        <a class="img-thumbnail" href="https://s24.postimg.org/kaqpw2xyd/test3.jpg" data-sub-html="Photo caption 3"><img class="img-responsive" src="https://s24.postimg.org/kaqpw2xyd/test3.jpg" alt="photo 3" width="200" height="150">
        </a>
    </div>
</div>

The JavaScript code:

jQuery(window).ready(function () {
   $gallery = $('#gallery'); 
   $gallery.lightGallery({
       selector: '.img-thumbnail'
   });
   // layout Isotope after each image loads
   $gallery.imagesLoaded().progress( function() {
       $gallery.isotope('layout');
   });

   //isotope 
   $('#gallery').isotope({
       itemSelector: '.gallery-item',
       layoutmode: 'fitrows'
   });
   $('li.filter').on( 'click', function() {
       var filterValue = $(this).attr('data-filter');
       $('#gallery').isotope({ filter: filterValue });
       $gallery.data('lightGallery').destroy(true);
       $gallery.lightGallery({
           selector: filterValue.replace('*','')
       });
       $('.filter').removeClass('active');
       $(this).addClass('active');
   });
});

Destroy and reinitialize lightGallery/Isotope gallery after filtering

0 Answers0