我目前正在为一位艺术家创作作品集。我正在使用 Masonry with Isotope 过滤特定种类的绘画。单击项目时，它会打开 lightGallery：http ://sachinchoolur.github.io/lightGallery/
到目前为止一切正常，问题如下：
我想要实现的是，例如，如果您过滤自然绘画，则只会显示自然绘画，并且如果您单击其中一个项目，它将打开画廊。但问题是，目前所有类别的所有图像都显示在自然画廊中。因此，如果您单击它们，您还会获得例如“人”类别的图像。
我想这样做的目的是为不同的类别提供不同的“画廊”。但是如果点击过滤器“全部显示”，用户也应该能够点击所有类别的所有图像，这样当被点击的项目的类别“结束”时，图库不会结束。
由于我对 javascript 不是很好，我希望你能帮助我一点，并且你理解我的问题..
代码 HTML 标记
<div class="categories">
<button data-filter="*">Alle</button>
<button data-filter=".ship">Schiff</button>
<button data-filter=".copop">CoPop</button>
<button data-filter=".grey_bg">grey bg</button>
</div>
<div class="grid" id="lightgallery">
<a class="grid__item copop" href="app/assets/img/co-pop.jpg">
<img class="grid__item__img" src="app/assets/img/co-pop.jpg">
</a>
<a class="grid__item ship" href="app/assets/img/ship.jpg">
<img class="grid__item__img" src="app/assets/img/ship.jpg">
</a>
<a class="grid__item copop" href="app/assets/img/co-pop.jpg">
<img class="grid__item__img" src="app/assets/img/co-pop.jpg">
</a>
<a class="grid__item ship" href="app/assets/img/ship.jpg">
<img class="grid__item__img" src="app/assets/img/ship.jpg">
</a>
<a class="grid__item copop" href="app/assets/img/co-pop.jpg">
<img class="grid__item__img" src="app/assets/img/co-pop.jpg">
</a>
<a class="grid__item ship" href="app/assets/img/ship.jpg">
<img class="grid__item__img" src="app/assets/img/ship.jpg">
</a>
</div>
</div>
JS初始化lightgallery
<script type="text/javascript">
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
</script>
JS同位素
(function($) {
$('#wrap').imagesLoaded(function() {
$('.categories').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });
});
var $grid = $('.grid').isotope({
itemSelector: '.grid__item',
percentPosition: true,
masonry: {
columnWidth: '.grid__item'
}
})
});
所以我想我需要创建几个画廊并在代码中说只有那个激活的数据过滤器画廊的项目才会在点击时显示。但也许这也可以在不创建额外的多个画廊的情况下工作？因为那么问题可能是，当所有项目都处于活动状态时，只有所选项目的特定画廊中的那些才会显示在 lightGallery 中。
提前谢谢你的帮助！