Javascript 具有多个廊道的lightGallery过滤同位素

我目前正在为一位艺术家制作一个作品集。我用带有同位素的砖石来过滤特定种类的油漆。单击项目时，将打开lightGallery：

目前一切正常，问题如下：

我想实现的是，如果你过滤自然画，例如，只有自然画会显示，如果你点击其中一个项目，它会打开画廊。但问题是，目前所有类别的图像都在自然画廊中展出。因此，如果你点击它们，你也会得到“人物”类别的图像

我想这样做的目的是给不同的类别提供不同的“画廊”。但是，如果单击了过滤器“show all”，用户还应该能够单击所有类别的所有图像，这样当单击的项目类别“ends”时，库不会结束

由于我不太擅长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>

因此，我想我需要创建几个库，并在代码中说，当单击时，只有激活的数据过滤器库的项目才会显示。但是，如果不创建额外的多个画廊，这可能也会起作用？因为问题可能是，当所有项目都处于活动状态时，lightGallery中只会显示所选项目的特定库中的项目

---

提前感谢您的帮助

请检查这支笔，以获得您需要的

$（文档）.ready（函数（）{
var$gallery=$（“#gallery”）；
var$box=$（'.revGallery-anchor'）；
$box.hide（）；
$gallery.imagesLoaded（{background:true}，function（））{
$box.fadeIn（）；
$gallery.com({
//选择权
sortBy:“原始订单”，
布局模式：“fitRows”，
itemSelector:“.revGallery锚点”，
错开：30，
});
});	
$（'button'）。在（'click'，function（）上{
var filterValue=$（this.attr（'data-filter'）；
$（#gallery'）。同位素（{filter:filterValue}）；
$gallery.data（'lightGallery'）.destroy（true）；
$gallery.lightGallery({
选择器：filterValue.replace（'*'，''）
});
});
});
$（文档）.ready（函数（）{
$（“#画廊”）。lightGallery({
}); 
});
//按钮激活模式
$（'.button'）。单击（函数（）{
$（'.button'）.removeClass（'is-checked'）；
$（this.addClass（'is-checked'）；
});
//鼠标输入时的CSS Gram过滤器
$（#画廊a.nak画廊海报”）.addClass（“墨水井”）；
元（“#画廊a”）。在({
mouseenter:function（）{
$（此）.find（“.nak画廊海报”）.removeClass（“墨水井”）.addClass（“瓦尔登”）；
},
mouseleave:function（）{
$（此）.find（“.nak画廊海报”）.removeClass（“walden”）.addClass（“inkwell”）；
}
}); 
.revGallery-anchor、.gal-overlay、.nak画廊海报{
-webkit框大小：边框框；
-moz框大小：边框框；
-ms框尺寸：边框框；
框大小：边框框；
}
.revGallery主播{
溢出：隐藏；
位置：相对位置；
宽度：计算值（100%/5）；
显示：块；
浮动：左；
边框：5px实心#e9e9e9；
}
.gal覆盖层{
显示：块；
宽度：100%；
身高：100%；
背景：rgba（27,27,27,0.6）；
位置：绝对位置；
排名：0；
左：0；
过渡：背景。4s轻松；
-webkit过渡：背景。4s轻松；
}
.revGallery锚定：悬停.gal覆盖{
背景：rgba（27,27,27,0）；
}
纳克画廊{
显示：块；
宽度：100%；
位置：相对位置；
边缘顶部：30px；
-webkit框大小：边框框；
-moz框大小：边框框；
-ms框尺寸：边框框；
框大小：边框框；
}
纳克画廊海报{
垫底：100%；
变换原点：50%50%；
-webkit转换来源：50%50%；
-ms转换来源：50%50%；
变换：比例（1,1）；
-webkit变换：比例（1,1）；
-ms变换：比例（1,1）；
过渡：全部。4s轻松；
-webkit过渡：全部。4s轻松；
}
.revGallery主播：hover.nak画廊海报{
变换：比例（1.1,1.1）；
-webkit转换：规模（1.1,1.1）；
-ms变换：比例（1.1,1.1）；
}
.img响应{
显示：无；
}
.按钮{
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
-webkit过渡：全部。4s轻松；
-moz过渡：全部。4s轻松；
-o型过渡：全部。4s轻松；
过渡：全部。4s轻松；
宽度：200px；
高度：48px；
边框：1px实心rgba（0169157,1）；
背景色：rgba（0169157,1）；
边界半径：2px；
颜色：#fff；
字母间距：2px；
}
.按钮：悬停{
背景色：#363636；
文本阴影：0 1px hsla（0,0%，100%，0.5）；
颜色：#fff；
}
.按钮：激活，
.button.is-checked{
背景色：#28F；
}
.button.is-checked{
颜色：白色；
文本阴影：0-1pxHSLA（0,0%，0,0.8）；
}
.按钮：激活{
盒影：插入0 1px 10px hsla（0,0%，0,0.8）；
}
.revGallery-anchor-width1{
宽度：40%
}
.revGallery-anchor-width2{
宽度：30%
}
.revGallery-anchor-width3{
宽度：20%
}
.nak-gallery-height1{
垫底：400px
}
.nak-gallery-height2{
垫底：300px
}
.nak-gallery-height3{
垫底：200px
}
.预载机{
显示：无；
}
.个性{
背景：红色；
宽度：100%；
高度：100px；
}
全部
设计
品牌创建
您需要包含相关代码和链接或JSFIDLE。是的，我添加了它，谢谢！有人知道如何使用多个库吗？谢谢你的代码片段，它可能会提供一些有限的短期帮助。通过说明为什么这是一个很好的问题解决方案来正确解释它的长期价值，并将使它对未来有其他类似问题的读者更有用。请在您的回答中添加一些解释，包括您所做的假设。
<script type="text/javascript">
      $(document).ready(function() {
          $("#lightgallery").lightGallery();
      });
  </script>

    (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'
        }
    })
});