Looping Carousel Magnific Popup Gallery

Feb 17, 2019

Looping Carousel Magnific Popup Gallery


This post was originally created on our sister site WP Cover.
View Original Article
February 17, 2019

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: 'The image #%curr% could not be loaded.'
	}
});

Then, you’ll want to add the imageitem class to each image link in your slider. Example below:

  

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.

The post Looping Carousel Magnific Popup Gallery appeared first on WP Cover.

Additional News

Perfect!

Let's get started. Fill out the form below to email us or request a call back.


FREE: 10 Step Guide To Choosing A Web Design Company

FREE: 10 Step Guide To Choosing A Web Design Company

Download your free e-book. Learn the questions you should be asking prior to partnering with a web design company. Enter your email address and we'll send it to you right away!

We've sent the e-book to your email address!