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

Question

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

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

请帮帮我

//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 销毁当前实例，并在单击同位素过滤器按钮时使用 re-initialize。

创建闭包并初始化 lightGallery

$gallery = $('#gallery'); 

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

当您单击同位素过滤器按钮时，销毁该实例，并根据您希望出现在图库中的 class 元素来 re-initialize。 class 这里是 filterValue

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

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

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

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

Isotope Filters to only display Filtered Light Gallery images

jquery

html

css

jquery-isotope

lightgallery