我正在尝试同时在图库上同时使用Unite Image Gallery和同位素过滤。我的同位素本身可以正常工作,而Unite Image Gallery本身可以工作。当我将它们放在一起时,由于Unite Galley使用Display:无,因此无法过滤图像。这些都可以在同一个画廊中共存吗?
他们自己工作,但不一起工作。这是叉子,但我不确定我做得是否正确。 https://codepen.io/soundtec24/pen/zbedQE
````````
<section id="picture-gallery" class="container-XL pad-100-bottom" style="padding-top:128px;">
<header class="container section-header">
<h1>Pictures</h1>
</header>
<div class="container text-center pad-50-bottom">
<i class="fas fa-hand-pointer"></i>
<p>Click on any image below to launch a full screen slide show of the individual pictures.</p></div>
<section id="galleryfilter" class="section">
<div class="row">
<div class="col-lg-12">
<ul id="gallery-flters">
<li data-filter="*" class="filter-active">All</li>
<li data-filter=".1">Scenery</li>
<li data-filter=".2">Costumes</li>
<li data-filter=".3">Props</li>
<li data-filter=".4">Projections</li>
</ul>
</div>
</div>
<div id="galler" class="gallery-container" style="display:non">
<a href="http://unitegallery.net" class="1 2 3 gallery-item">
<img alt="Lemon Slice!!!!!!!!!!!!!!!!!!"
src="img/gallery/sets/thumb/1.jpg"
data-image="img/gallery/sets/1.jpg"
data-description="This is a Lemon Slice"
style="display:non">
</a>
</div>
</section>
</section>
``````````
'''''''''
Javascript
var otherrentalsIsotope = $('.other-rentals-container').isotope({
itemSelector: '.rental-item',
layoutMode: 'fitRows'
});
$('#rental-flters li').on( 'click', function() {
$("#rental-flters li").removeClass('filter-active');
$(this).addClass('filter-active');
otherrentalsIsotope.isotope({ filter: $(this).data('filter') });
});
var galleryfilterIsotope = $('.gallery-container').isotope({
itemSelector: '.gallery-item',
layoutMode: 'fitRows'
});
$('#gallery-flters li').on( 'click', function() {
$("#gallery-flters li").removeClass('filter-active');
$(this).addClass('filter-active');
galleryfilterIsotope.isotope({ filter: $(this).data('filter') });
});
````````
我希望能够同时使用Unite Gallery和同位素过滤器过滤图像