Question

我正在使用大胆的弹出窗口（灯箱），我的容器中有几个图像。所有这些图像都显示在网站上。现在我想在点击图像时打开画廊模式中的弹出窗口，只显示具有特定类的图像（例如类'one'）。有可能吗？

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

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

这对我有用（我将我的图像放在无序列表中并将它们包装在.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
       }
   });
});

使用Magnific Popup仅显示具有特定类或id的图像

1 个答案: