同位素过滤器只显示过滤的光廊图片

我想为我的网站创建一个过滤组合，我已经设置了一切，但事情是，当我使用Isotope过滤一个类别，当然它会过滤出来，但是当我点击图像并启动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 }); 
});

来源

2017-01-16 Kamalakannan

如果创建一个封闭在初始化lightGallery，您可以使用API来破坏目前的情况下，当你点击同位素过滤器按钮重新初始化。

创建一个封闭和初始化lightGallery

$gallery = $('#gallery'); 

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

当你点击同位素过滤器按钮，摧毁实例，并基于类要在画廊中元素的重新初始化。那类是filterValue这里

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

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

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

来源

2017-01-19 17:39:59

你是真棒，你已经做了一遍。但“所有”类别不工作，我猜它是因为它有一个用于数据过滤的星号（*）。请看看可以做些什么。 – Kamalakannan

'selector：filterValue.replace（'*'，''）' - http://codepen.io/mcoker/pen/KaWKvE –

谢谢Micheal。它的工作完美。 – Kamalakannan

同位素过滤器只显示过滤的光廊图片

回答

相关问题