jquery - 同位素滤光片仅显示滤光画廊图像

Question

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

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

请帮帮我。

我的 Codepen

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