Multiple Galleries with Magnific Popup - magnific-popup

Question

I'm trying to create a page with a few galleries using the Magnific-Popup jQuery plug-in. I different sections contained in divs with separate ids and a .gallery class containing the images.
<div id="content_1">
<p>Some content</p>
<div class="gallery">
<img src="img/pic_1.jpg">
<img src="img/pic_2.jpg">
</div>
</div>
<div id="content_2">
<p>More content</p>
<div class="gallery">
<img src="img/pic_3.jpg">
<img src="img/pic_4.jpg">
</div>
</div>
To get the galleries to be separate in the popup I initialized the script multiple times for each content section. When I do this, however, after the first content section, there are more images in the gallery popup (twice as much to be exact) than I linked to. I'm new to javascript, so I'm not sure if I'm just missing something obvious.

Answer 1

From the documentation:
To have multiple galleries on a page, you need to create a new
instance of Magnific Popup for each seperate gallery. For example
<div class="gallery">
Open image 1 (gallery #1)
Open image 2 (gallery #1)
</div>
<div class="gallery">
Open image 1 (gallery #2)
Open image 2 (gallery #2)
Open video (gallery #2). Class mfp-iframe forces "iframe" content type on this item.
</div>
Javascript
$('.gallery').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: 'a', // the selector for gallery item
type: 'image',
gallery: {
enabled:true
}
});
});
Hope that helps!