精彩弹出窗口 - 根据单击的图像显示不同的图库

Question

我正在尝试根据您单击的原始链接出现 2 组单独的图像，以达到投资组合的目的。

<span class ="imageParent">
<a href="#" target="_blank">
<span class="portfolio-links">
<span class="ion-ios-arrow-right portfolio-links-icons"></span> 
</span>
</a>
<a href="images/academy/msa.PNG" class="zoom" >
<span class="portfolio-links">
<span class="ion-arrow-expand portfolio-links-icons"></span> 
</span>
</a>
<a href="images/academy/whatcanyoudo.PNG" class="zoom"></a>
</span>
<span class="imageParent">
<a href="#" target="_blank">
<span class="portfolio-links">
<span class="ion-ios-arrow-right portfolio-links-icons"></span> 
</span>
</a>
<a href="images/mse.PNG" class="zoom">
<span class="portfolio-links">
<span class="ion-arrow-expand portfolio-links-icons"></span> 
</span>
</a>
</span>
$('.imageParent').magnificPopup({
delegate: 'a.zoom',
type: 'image',
gallery: {
enabled: true,
preload: [0,2]
}
});

我遇到的问题是，无论我选择"imageParent"类的哪个跨度，它都会显示每个图像。我想知道是否有其他人遇到过这个问题，如果他们有，他们是否找到了解决该问题的干净方法，而不必为每个画廊设置一个唯一的 ID。

文档在这里： http://dimsemenov.com/plugins/magnific-popup/documentation.html - 特别是第 2 点

Answer 1

您可以为父级创建两个单独的 magnificPopup。

$('.imageParent').each(function() {
$(this).magnificPopup({
delegate: 'a.zoom',
type: 'image',
gallery: {
enabled: true,
preload: [0,2]
}
});
});

$('.imageParent').each(function() { 
$(this).magnificPopup({
delegate: 'a.zoom',
type: 'image',
gallery: {
enabled: true,
preload: [0,2]
}
});
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
<span class ="imageParent parent1">
<a href="#" target="_blank">
<span class="portfolio-links">
<span class="ion-ios-arrow-right portfolio-links-icons">noimage</span> 
</span>
</a>&nbsp;
<a href="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" class="zoom" >
<span class="portfolio-links">
<span class="ion-arrow-expand portfolio-links-icons">image 1</span> 
</span>
</a>&nbsp;
<a href="https://media.istockphoto.com/photos/plant-growing-picture-id510222832?k=6&m=510222832&s=612x612&w=0&h=Pzjkj2hf9IZiLAiXcgVE1FbCNFVmKzhdcT98dcHSdSk=" class="zoom">image2</a>&nbsp;
</span>
<span class="imageParent parent2">
<a href="#" target="_blank">
<span class="portfolio-links">
<span class="ion-ios-arrow-right portfolio-links-icons">noimage</span> 
</span>
</a>&nbsp;
<a href="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" class="zoom">
<span class="portfolio-links">
<span class="ion-arrow-expand portfolio-links-icons">image 3</span> 
</span>
</a>
</span>

你也可以在这里测试它.. https://jsfiddle.net/nimittshah/vgpsyado/

无需重复相同的代码..https://jsfiddle.net/nimittshah/vgpsyado/8/