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/

宏伟的弹出窗口-根据点击的图片显示不同的画廊

1 个答案: