Magnific Pop-Up - 根据点击的图像显示不同的画廊

Question

我正在尝试根据您点击的 link 原始图像出现 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]
    }
});

我遇到的问题是，无论我选择 class "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/

Magnific Pop-Up - 根据点击的图像显示不同的画廊

Magnific Pop-Up - Show different gallery depending upon image clicked

jquery

html

magnific-popup