jquery - 同位素过滤器仅显示过滤光图库图像

Question

我想为我的网站创建一个过滤组合，我已经完成了所有设置，但问题是，当我使用 Isotope 过滤一个类别时，它当然会过滤掉，但是当我单击图像并启动 lig​​htgallery 时，它显示所有类别的所有图像。

我希望特定类别的图像在 lightgallery 的幻灯片中可见。我在堆栈中看到了一些答案，我想我需要实现一个影子盒。但不知道如何。

请帮我。

我的密码笔

//isotope Code
$('#gallery').isotope({
   // options
   itemSelector: '.revGallery-anchor',
   layoutmode: 'fitrows'
});
$('button').on( 'click', function() {
  var filterValue = $(this).attr('data-filter');
$('#gallery').isotope({ filter: filterValue });
});

Answer 1

如果在初始化 lightGallery 时创建了闭包，则可以使用 API 销毁当前实例，并在单击同位素过滤器按钮时重新初始化。

创建一个闭包并初始化 lightGallery

$gallery = $('#gallery'); 

$gallery.lightGallery({...});

当您单击同位素过滤器按钮时，销毁该实例并根据您想要在图库中的元素类别重新初始化。那堂课在filterValue这里

$gallery.data('lightGallery').destroy(true);

$gallery.lightGallery({
  selector: filterValue.replace('*','');
});

http://codepen.io/mcoker/pen/KaWKvE