Magnific popup galleries - isolate from each other

Question

I have 3 main images being displayed. I want each image, when clicked, to popup its own individual gallery. If each gallery has 5 images, when the main image is clicked, it should show 1 of 5, etc. Currently when each main photo is clicked the gallery popup shows 1 of 15 images - so it's including all images from all 3 galleries.

<div class="row">
  <div class="gallery">
     <a href="img/gallery1/1.jpg" >
       <img src="img/MainImage1.jpg">
     <div class="caption">Gallery for image 1</div> </a>
       <a href="img/gallery1/2.jpg" ></a>
       <a href="img/gallery1/3.jpg" ></a>
       <a href="img/gallery1/4.jpg" ></a>
       <a href="img/gallery1/5.jpg" ></a>
           </div>
  <div class="gallery">
     <a href="img/gallery2/1.jpg" >
       <img src="img/MainImage2.jpg">
     <div class="caption">Gallery for image 2</div></a>
       <a href="img/gallery2/2.jpg" ></a>
       <a href="img/gallery2/3.jpg" ></a>
       <a href="img/gallery2/4.jpg" ></a>
       <a href="img/gallery2/5.jpg" ></a>
           </div>
  <div class="gallery">
     <a href="img/gallery3/1.jpg" >
       <img src="img/MainImage3.jpg">
     <div class="caption">Gallery for image 3</div></a>
       <a href="img/gallery3/2.jpg" ></a>
       <a href="img/gallery3/3.jpg" ></a>
       <a href="img/gallery3/4.jpg" ></a>
       <a href="img/gallery3/5.jpg" ></a>
           </div>

My JS:

$('.gallery').each(function() { // the containers for all your galleries
$(this).magnificPopup({        
delegate: 'a',
    type: 'image',
    tLoading: 'Loading image #%curr%...',
    mainClass: 'mfp-img-mobile',
    gallery: {
        enabled: true,
        navigateByImgClick: true,
        preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
    },
    image: {
        tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
    }
});

I have read this in the documentation:

Multiple galleries

To have multiple galleries on a page, you need to create a new instance of Magnific Popup for each separate gallery. For example

<div class="gallery">
    <a href="path-to-image.jpg">Open image 1 (gallery #1)</a>
    <a href="path-to-image.jpg">Open image 2 (gallery #1)</a>
</div>
<div class="gallery">
    <a href="path-to-image.jpg">Open image 1 (gallery #2)</a>
    <a href="path-to-image.jpg">Open image 2 (gallery #2)</a>
    <a href="http://vimeo.com/123123" class="mfp-iframe">Open video (gallery #2). Class mfp-iframe forces "iframe" content type on this item.</a>
</div>

Js:

$('.gallery').each(function() { // the containers for all your galleries
    $(this).magnificPopup({
        delegate: 'a', // the selector for gallery item
        type: 'image',
        gallery: {
          enabled:true
        }
    });
});

But this is not clear to me. How do you differentiate the galleries? Or should it know where to pull from automatically?

Do I need to call one "popup-gallery2"? Would I then need a separate instance of the javascript to control popup-gallery2, etc?

Or is there something I'm missing? Is what I'm asking for possible using this plugin or is there a better way to accomplish this?

Thank you for reading all this - I hope it is clear what I'm asking.

Answer 1

Good question, it was a little tricky, as the documentation wasn't that in-depth on the multiple galleries.

It worked for me this way: Put each gallery inside the gallery-link div. Using jQuery find() method open the child gallery of the selected gallery-link. Then initialize containers for all your galleries. See code below: HTML:

<div class="gallery-link">
    <a href="#gallery1"><img src="http://placehold.it/200x100/54c0c7?text=Gallery-1" alt="" /></a>
  <div id="gallery1" class="gallery">
    <a href="http://placehold.it/350x100/ceedef"></a>
    <a href="http://placehold.it/350x100/9ddbdf"></a>
    <a href="http://placehold.it/350x100/54c0c7"></a>
  </div>
</div>

<div class="gallery-link">
    <a href="#gallery2"><img src="http://placehold.it/200x100/fef65b?text=Gallery-2" alt="" /></a>
  <div id="gallery2" class="gallery">
    <a href="http://placehold.it/350x100/fef99c"></a>
    <a href="http://placehold.it/350x100/fef65b"></a>
    <a href="http://placehold.it/350x100/cbc448"></a>
  </div>
</div>

JavaScript:

$('.gallery-link').on('click', function () {
    $(this).find('.gallery').magnificPopup('open');
});

$('.gallery').each(function () {
    $(this).magnificPopup({
        delegate: 'a',
        type: 'image',
        gallery: {
            enabled: true
        }
    });
});

Working example: https://codepen.io/pen/BRPJdw Good luck!

Answer 2

Encountered same problem for my work. Here is the answer which working fine.

 <div class="caption jsPop-1">
       Gallery for image 1
       <a href="img/gallery1/2.jpg" ></a>
       <a href="img/gallery1/3.jpg" ></a>
       <a href="img/gallery1/4.jpg" ></a>
       <a href="img/gallery1/5.jpg" ></a>
</div>
 <div class="caption jsPop-2">
       Gallery for image 2
       <a href="img/gallery1/2.jpg" ></a>
       <a href="img/gallery1/3.jpg" ></a>
       <a href="img/gallery1/4.jpg" ></a>
       <a href="img/gallery1/5.jpg" ></a>
</div>

$(function(){
    $('[class*="jsPop-"]').each(function(){
        $(this).magnificPopup({
            delegate: 'a',
            type: 'image',
            gallery: {
                enabled:true
            }
        });
    });
});

Just make each gallery container is unique, then select by class and apply popup.