Search code examples
javascriptjquerymagnific-popupslick.js

Magnific Popup - Ignore images in gallery

I'm using a combination of Slick Slider and Magnific.

The slick slider is on an infinite loop and contains multiple images, the slider as a whole is one Magnific gallery.

Slick clones elements to create the infinite loop effect and adds the class "slick-cloned" to the cloned elements, I need to ignore these cloned elements from my Magnific gallery.

I'm struggling to find any documentation on dynamically ignoring elements from a gallery though. Any one have any ideas?

I've tried using a delegate as shown below but this just doesn't pick anything up at all.

$('.container').magnificPopup({
   delegate: '.module:not(.slick-cloned) .gal-test',
   type:'image'
});

My HTML structure

<div class='container'>
<div class='slider-wrap'>
    <div class='slick-slider'>
        <div class='module'><a href='image.jpg' class='gallery gal-test'><img src='' /></a></div>
        <div class='module'><a href='image.jpg' class='gallery gal-test'><img src='' /></a></div>
    </div>
</div>
</div>

Thanks, Dean

Solution

  • Turned off infinite scroll as a quick fix.

    Real problem was caused by looping through each gallery and reassigning the "container" to magnific pop-up. Solution would be to create another level container around each module.