Looping Carousel Magnific Popup Gallery


About The Author
Cabe Nolan is the founder of WP Cover where he shares his insight into WordPress, development, & entrepreneurship. Outside of WPCover, Cabe continues to run a successful WordPress development firm, Bold City Design as well as a few high profile websites, Arrivala, Two Way Resume, Dock Skipper, and a successful outdoors brand, DolfinPack.







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

Leave a Reply

Your email address will not be published.


Related Stuff You Might Like







WordPress News, Tips, & Code Snippets

Join the WP Cover mailing list and get wordpress news, tips, code snippets, security warnings, and more delivered right to your inbox.  We won't flood your inbox, newsletters typically go out every 1-2 weeks unless it involves an important security release.

You have Successfully Subscribed!