Magnific-Popup，将项目限制为直接兄弟姐妹

Question

我怎样才能将 magnific-popup 画廊限制为直接兄弟姐妹？当我打开第一个 .child 中的图像时，我不希望第二个 .child 中的图像出现在图库中。

html结构：

<div class="parent">
    <div class="child">
        <a class="image-link" href="img/red1.jpg"><img src="img/red1.jpg"></a>
        <a class="image-link" href="img/red2.jpg"><img src="img/red2.jpg"></a>
        <a class="image-link" href="img/red3.jpg"><img src="img/red3.jpg"></a>
        <a class="image-link" href="img/red4.jpg"><img src="img/red4.jpg"></a>
        <a class="image-link" href="img/red5.jpg"><img src="img/red5.jpg"></a>
    </div>

    <div class="child">
        <a class="image-link" href="img/city1.jpg"><img src="img/city1.jpg"></a>
        <a class="image-link" href="img/city2.jpg"><img src="img/city2.jpg"></a>
        <a class="image-link" href="img/city3.jpg"><img src="img/city3.jpg"></a>
        <a class="image-link" href="img/city4.jpg"><img src="img/city4.jpg"></a>
        <a class="image-link" href="img/city5.jpg"><img src="img/city5.jpg"></a>
    </div>
</div>

我如何初始化 Magnific-Popup：

$('.child').magnificPopup({ 
    delegate: '.image-link',
    type:'image', 
    gallery: {
        enabled: true
    }
});

Answer 1

如果使用delegate 选项，只能这样：

$('.child').each(function() {
     $(this).magnificPopup({ 
        delegate: '.image-link',
        type:'image', 
        gallery: {
            enabled: true
        }
    });
});