同位素过滤器仅显示已过滤的光图库图像 [英] Isotope Filters to only display Filtered Light Gallery images

问题描述

我想为我的网站创建一个过滤组合，我有一切设置，但事情是，当我使用Isotope过滤一个类别，当然它过滤掉，但当我点击图像和点亮图库，它显示所有类别的所有图像。

I wanted to create a filtering portfolio for my website, I've got everything setup but the thing is, When I use Isotope to filter a category, of course it filters out but when I click on the image and fire up lightgallery, it shows all the images from all categories.

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

I want the images of a particular category to be visible in the slideshow of lightgallery. I saw some answer in stack, I guess I need to implement a shadowbox. but don't know how.

请帮助我。

我 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 });
});

推荐答案

如果在初始化lightGallery时创建闭包，

If you create a closure when you initialize lightGallery, you can use the API to destroy the current instance and re-initialize when you click the isotope filter buttons.

创建一个闭包并初始化lightGallery

Create a closure and initialize lightGallery

$gallery = $('#gallery'); 

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

当您点击同位素过滤器按钮时，销毁该实例并根据类重新初始化的您想要在图库中的元素。该类 filterValue 此处

And when you click on the isotope filter button, destroy that instance and re-initialize based on the class of the elements you want to be in the gallery. That class is filterValue here

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

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

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

这篇关于同位素过滤器仅显示已过滤的光图库图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！