时间戳

首页 > 解决方案 > Magnific Pop-Up - 根据点击的图像显示不同的画廊

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

问题描述

我试图根据您单击的原始链接显示 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 点

标签： jqueryhtmlmagnific-popup

解决方案

您可以为两个父级创建两个单独的 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/

推荐阅读