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_gallerydiv 中）：

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