我目前正在为一位艺术家创作作品集。我正在使用Isotope的砌体来过滤特定种类的止痛药。点击项目后，它会打开lightGallery：http://sachinchoolur.github.io/lightGallery/
到目前为止一切正常，问题如下：
我想要实现的是，如果您过滤自然绘画，例如，只会显示自然绘画，如果您点击其中一个项目，它会打开画廊。但问题是，目前所有类别的所有图像都显示在自然画廊中。因此，如果您点击它们，您还可以获得“人物”类别的图像。
我想这里的目的是为不同的类别提供不同的'画廊'。但是，如果单击过滤器“显示全部”，则用户还应该能够点击所有类别的所有图像，以便当被点击的项目的类别“结束”时，图库不会结束。
由于我对javascript不是那么好，我希望你能帮助我一点点，并且你理解我的问题..
守则 HTML MARKUP
<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中。
提前感谢您的帮助！
答案 0 :(得分：-1)
请随便检查一下这支笔，以获取您需要的东西
$(document).ready(function() {
var $gallery = $('#gallery');
var $boxes = $('.revGallery-anchor');
$boxes.hide();
$gallery.imagesLoaded( {background: true}, function() {
$boxes.fadeIn();
$gallery.isotope({
// options
sortBy : 'original-order',
layoutMode: 'fitRows',
itemSelector: '.revGallery-anchor',
stagger: 30,
});
});
$('button').on( 'click', function() {
var filterValue = $(this).attr('data-filter');
$('#gallery').isotope({ filter: filterValue });
$gallery.data('lightGallery').destroy(true);
$gallery.lightGallery({
selector: filterValue.replace('*','')
});
});
});
$(document).ready(function() {
$("#gallery").lightGallery({
});
});
//button active mode
$('.button').click(function(){
$('.button').removeClass('is-checked');
$(this).addClass('is-checked');
});
//CSS Gram Filters on Mouse enter
$("#gallery a .nak-gallery-poster").addClass("inkwell");
$("#gallery a").on({
mouseenter : function() {
$(this).find(".nak-gallery-poster").removeClass("inkwell").addClass("walden");
},
mouseleave : function() {
$(this).find(".nak-gallery-poster").removeClass("walden").addClass("inkwell");
}
}); .revGallery-anchor, .gal-overlay, .nak-gallery-poster{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.revGallery-anchor{
overflow: hidden;
position: relative;
width: calc(100% / 5);
display: block;
float: left;
border: 5px solid #e9e9e9;
}
.gal-overlay{
display: block;
width: 100%;
height: 100%;
background: rgba(27,27,27, 0.6);
position: absolute;
top: 0;
left: 0;
transition: background .4s ease;
-webkit-transition: background .4s ease;
}
.revGallery-anchor:hover .gal-overlay{
background: rgba(27,27,27, 0);
}
.nak-gallery {
display: block;
width: 100%;
position: relative;
margin-top: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.nak-gallery-poster{
padding-bottom:100%;
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform: scale(1, 1);
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transition: all .4s ease;
-webkit-transition: all .4s ease;
}
.revGallery-anchor:hover .nak-gallery-poster{
transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
}
.img-responsive{
display:none;
}
.button{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
width: 200px;
height: 48px;
border: 1px solid rgba(0,169,157,1);
background-color: rgba(0,169,157,1);
border-radius: 2px;
color: #fff;
letter-spacing: 2px;
}
.button:hover {
background-color: #363636;
text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
color: #fff;
}
.button:active,
.button.is-checked {
background-color: #28F;
}
.button.is-checked {
color: white;
text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}
.button:active {
box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}
.revGallery-anchor-width1{
width: 40%
}
.revGallery-anchor-width2{
width: 30%
}
.revGallery-anchor-width3{
width: 20%
}
.nak-gallery-height1{
padding-bottom: 400px
}
.nak-gallery-height2{
padding-bottom: 300px
}
.nak-gallery-height3{
padding-bottom: 200px
}
.preloader{
display: none;
}
.preloaderStyle{
background: red;
width: 100%;
height: 100px;
}<button type="button" class="button is-checked" data-filter="">ALL</button>
<button type="button" class="button" data-filter=".design">DESIGN</button>
<button type="button" class="button" data-filter=".branding">BRANDING</button>
<div class="nak-gallery nlg1" id="gallery">
<a href="http://unsplash.com/photos/GYNxcQvBNzA/download" class="revGallery-anchor design">
<img class="img-responsive" src="http://unsplash.com/photos/GYNxcQvBNzA/download">
<div style="overflow:hidden">
<div class="nak-gallery-poster" style="background-image:url('http://unsplash.com/photos/GYNxcQvBNzA/download');background-size:cover;background-repeat:no-repeat;background-position:center center;display: block;width: 100%;height: 0;"></div>
</div>
<div class="gal-overlay">
<div class="photo"></div>
</div>
</a>
<a href="https://www.youtube.com/watch?v=Io0fBr1XBUA" class="revGallery-anchor branding">
<img class="img-responsive" src="http://unsplash.com/photos/ssAcdlJRsI4/download">
<div style="overflow:hidden">
<div class="nak-gallery-poster" style="background-image:url('http://unsplash.com/photos/ssAcdlJRsI4/download');background-size:cover;background-repeat:no-repeat;background-position:center center;display: block;width: 100%;height: 0;"></div>
</div>
<div class="gal-overlay">
<div class="photo"></div>
</div>
</a>
<a href="http://unsplash.com/photos/EKIyHUrUHWU/download" class="revGallery-anchor design">
<img class="img-responsive" src="http://unsplash.com/photos/EKIyHUrUHWU/download">
<div style="overflow:hidden">
<div class="nak-gallery-poster" style="background-image:url('http://unsplash.com/photos/EKIyHUrUHWU/download');background-size:cover;background-repeat:no-repeat;background-position:center center;display: block;width: 100%;height: 0;"></div>
</div>
<div class="gal-overlay">
<div class="photo"></div>
</div>
</a>
<a href="http://unsplash.com/photos/CFi7_hCXecU/download" class="revGallery-anchor branding">
<img class="img-responsive" src="http://unsplash.com/photos/CFi7_hCXecU/download">
<div style="overflow:hidden">
<div class="nak-gallery-poster" style="background-image:url('http://unsplash.com/photos/CFi7_hCXecU/download');background-size:cover;background-repeat:no-repeat;background-position:center center;display: block;width: 100%;height: 0;"></div>
</div>
<div class="gal-overlay">
<div class="photo"></div>
</div>
</a>
<a href="http://unsplash.com/photos/cFplR9ZGnAk/download" class="revGallery-anchor design">
<img class="img-responsive" src="http://unsplash.com/photos/cFplR9ZGnAk/download">
<div style="overflow:hidden">
<div class="nak-gallery-poster" style="background-image:url('http://unsplash.com/photos/cFplR9ZGnAk/download');background-size:cover;background-repeat:no-repeat;background-position:center center;display: block;width: 100%;height: 0;"></div>
</div>
<div class="gal-overlay">
<div class="photo"></div>
</div>
</a>
</div>