Looping Carousel Magnific Popup Gallery
Looping Carousel Magnific Popup Gallery
Today we’re going to tackle a problem related to looping carousels like Owl Carousel, Slick Carousel or Swiper Carousel and how we can still use the Magnific Popup Gallery feature if those sliders are set to looping mode.
As you may notice, these carousels when set to loop create clones of each slide. These clones cause issues with the Magnific popup gallery feature in determining which images to include in the gallery. Our solution, as outlined below, targets only the original slides and ignores the clones created by the slider. Here is our function:
jQuery('.loop-gallery').magnificPopup({ delegate: '.swiper-slide:not(.swiper-slide-duplicate) a.imageitem', type: 'image', removalDelay: 500, //delay removal by X to allow out-animation callbacks: { beforeOpen: function() { // just a hack that adds mfp-anim class to markup this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim'); this.st.mainClass = this.st.el.attr('data-effect'); } }, 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.' } });
Then, you’ll want to add the imageitem class to each image link in your slider. Example below:
<?php foreach( $images as $image ): ?> <div class="swiper-slide"> <div class="single-image-slide"> <a href="<?php echo $image['sizes']['large']; ?>" class="imageitem"> <img src="<?php echo $image['sizes']['large']; ?>"> </a> </div> </div> <?php endforeach ?>
The above example is for the Swiper carousel but you can modify the code as needed to work with Owl Carousel or the Slick Carousel by simply adjusting your target classes on line 2 of the function.
Share Your Thoughts