jquery - 使用 Magnific Popup 仅显示具有特定类别或 ID 的图像

Question

我正在使用 magnific popup(灯箱)，我的容器中有几张图片。所有这些图像都显示在网站上。现在我想在单击图像时以图库模式打开弹出窗口并仅显示具有特定类(例如类“一”)的图像。可能吗？

HTML

<div class="zoom-gallery" > 
    <a href="a.jpg"><img class="one" src="a.jpg"/></a>
    <a href="b.jpg"><img class="two" src="b.jpg"/></a>
    <a href="c.jpg"><img class="one" src="c.jpg"/></a>
    <a href="d.jpg"><img class="three" src="d.jpg"/></a>
</div>

JS

$('.zoom-gallery').magnificPopup({
    delegate: 'a',
    type: 'image',
    closeOnContentClick:true,
    closeBtnInside: true,        
    gallery: {
        enabled: true
    }
});

感谢您的帮助!

Answer 1

对于仍在寻找的任何人，这里是使用相反方法的解决方案。换句话说，您可以隐藏特定类别的图像并显示其余图像。

这对我有用(我将我的图像放入无序列表并将它们包装在 .my_gallery div 中):

$('.my_gallery').each(function() { // iterate over unordered list placed inside '.my_gallery' div
    $(this).magnificPopup({        
       delegate: 'a:not(.hidden)', // the select all except hidden ones
       type: 'image',
       removalDelay: 1000,
       gallery: {
           enabled:true
       }
   });
});