Уничтожить и заново инициализировать lightGallery/ Галерея изотопов после фильтрации

Question

Я использую lightGallery (v1.3.8) плюс Isotope (v3.0.2), чтобы создать фотогалерею на закладке Bootstrap. Lighgallery не может отобразить увеличенные фотографии после того, как пользователь щелкнет по любому из изотопных фильтров и выдаст ошибку JS: "Не удается прочитать свойство 'match' of undefined".

Кажется, проблема связана с командой destroy(). Если я удаляю это, галерея работает, когда фильтры выбраны, но lightgallery показывает полную библиотеку, а не только отфильтрованный результат.

imagesLoaded () используется, потому что изображения пересекались при начальной загрузке. Это может быть связано с тем, что в галерее более 70 изображений.

JSFiddle https://jsfiddle.net/1qghLkuh/ демонстрирует проблему. HTML-код, который я использую:

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

Код JavaScript:

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');
   });
});