Question

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

我希望在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销毁当前实例并在单击同位素过滤器按钮时重新初始化。

创建一个闭包并初始化lightGallery

$gallery = $('#gallery'); 

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

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

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

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

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

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

1 个答案: