我正在建立一个wordpress网站。我正在实施同位素用于图像布局和过滤（isotope.metafizzy）
我已经配置了Isotope，因此图像是可以放置和过滤的，这一切都正常。
目前，当我在灯箱中打开图像时，它会加载系列中的所有图像，包括当前隐藏的图像（由Isotope过滤）。
我想更改我的解决方案，以便只将可见图像加载到灯箱中。这样，用户可以使用同位素过滤到所需的图像集，然后可以使用灯箱以更大的格式查看这些图像。
下面的代码是wordpress输出的内容（来自查看页面源代码）。
我在this post尝试了解决方案，但我无法适应我的代码。
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div id="filters" class="button-group">
<button class="button is-checked" data-filter="*">Afficher tout</button>
<button class="button" data-filter=".faune">faune</button><button class="button" data-filter=".flore">flore</button><button class="button" data-filter=".paysage">paysage</button>
</div>
<div id="isotopegallery" class="grid">
<div class="element-item flore" >
<a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/realisation-piscine-décoration-paysagere-style-habitat.jpg" data-lightbox="image-1" data-title="Portfolio elt 8 ">
<img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/realisation-piscine-décoration-paysagere-style-habitat-150x150.jpg" alt="">
</a>
</div>
<div class="element-item faune" >
<a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/07/totem-arbre-siege-gonthier.jpg" data-lightbox="image-1" data-title="Portfolio elt 7 ">
<img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/07/totem-arbre-siege-gonthier-150x150.jpg" alt="">
</a>
</div>
<div class="element-item flore" >
<a href="http://localhost/wordpress_onepage/wp-content/uploads/2016/08/piscine_CHU01-1024x789.jpg" data-lightbox="image-1" data-title="Portfolio elt 6 ">
<img src="http://localhost/wordpress_onepage/wp-content/uploads/2016/08/piscine_CHU01-150x150.jpg" alt="">
</a>
</div>
<div class="element-item faune" >
<a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/decoration-minerale-paysagere.jpg" data-lightbox="image-1" data-title="Portfolio elt 5 ">
<img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/decoration-minerale-paysagere-150x150.jpg" alt="">
</a>
</div>
<div class="element-item flore" >
<a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/2-1.jpg" data-lightbox="image-1" data-title="Portfolio elt 4 ">
<img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/2-1-150x150.jpg" alt="">
</a>
</div>
<div class="element-item paysage" >
<a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/realisation-escalier-en-pierre-savoie.jpg" data-lightbox="image-1" data-title="Portfolio elt 3 ">
<img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/realisation-escalier-en-pierre-savoie-150x150.jpg" alt="">
</a>
</div>
</div>
</p>
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<!-- framework gallery isotope -->
<script src="https://npmcdn.com/isotope-layout@3.0/dist/isotope.pkgd.min.js"></script>
<!-- framework gallery lightbox -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.js"></script>
<!-- framework gallery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<script>
// external js: isotope.pkgd.js
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
getSortData: {
name: '.name',
symbol: '.symbol',
number: '.number parseInt',
category: '[data-category]',
weight: function( itemElem ) {
var weight = $( itemElem ).find('.weight').text();
return parseFloat( weight.replace( /[\(\)]/g, '') );
}
}
});
// filter functions
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) > 50;
},
// show if name ends with -ium
ium: function() {
var name = $(this).find('.name').text();
return name.match( /ium$/ );
}
};
// bind filter button click
$('#filters').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$grid.isotope({ filter: filterValue });
});
// bind sort button click
$('#sorts').on( 'click', 'button', function() {
var sortByValue = $(this).attr('data-sort-by');
$grid.isotope({ sortBy: sortByValue });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
</script>
感谢您的帮助
答案 0 :(得分：1)
使用magnificPopup我在同位素的arrangeComplete事件中添加/删除magnificPopup使用的类（请参阅委托选项）。
具有图像的同位素元素，class = mag由magnificPopup
使用<div class="element-item">
<a href="gallery-image" class="mag">
<img src="gallery-thumb" />
</a>
</div>
使用委托
的magnificPopup$grid.magnificPopup({
type: 'image',
delegate: 'a.mag',
gallery: {
enabled: true
},
zoom: {
enabled: true,
duration: 300,
opener: function (e) {
return e.find("img");
}
}
});
添加/删除magnificPopup委托类
$grid.on('arrangeComplete', function(event, filteredItems) {
$(".element-item:hidden a").removeClass("mag");
$(".element-item:visible a").addClass("mag");
});
答案 1 :(得分：-1)
如果您要将一组相关图像组合成一组，请对所有图像使用相同的data-lightbox属性值。
例如：
<a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>