Question

我正在使用lightGallery（v1.3.8）和Isotope（v3.0.2）在Bootstrap标签页中构建照片库。用户点击任何同位素过滤器后，Lighgallery无法显示照片放大图并产生JS错误：“无法读取未定义的属性'匹配'。”

问题似乎与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');
   });
});

过滤后销毁并重新初始化lightGallery / Isotope画廊

0 个答案: