Search code examples
jqueryhtmlmagnific-popup

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

I'm trying to have 2 separate sets of images come up depending on the original link you clicked on, for a portfolio kind of purpose.

<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]
    }
});

The issue I have is that regardless of which span with the class "imageParent" I choose, it will show every single image. I'd like to know if any body else has encountered this issue and if they have whether they found a clean way around it, rather than having to give each gallery set a unique id.

Documentation is here: http://dimsemenov.com/plugins/magnific-popup/documentation.html - specifically point 2

Solution

  • You can create two separate magnificPopup for both parent.. 

    $('.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>

    You can also test it here .. https://jsfiddle.net/nimittshah/vgpsyado/

    Without repeating same code.. https://jsfiddle.net/nimittshah/vgpsyado/8/