2

我正在使用 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');
   });
});
4

0 回答 0