Skip to content

Add a lightbox popup to a jQuery lightslider carousel

Adding a lightbox pop up to a lightslider slider/carousel can be achieved by adding a script such as magnificPopup to a lightslider callback once the slider has loaded. The callback name is onSliderLoad which is fired when the slider is loaded.

Make sure you have the magnificPopup script loaded, it’s a very popular lightbox and may well already be running on a site you are trying to do this on.

jQuery(document).ready(function($){    
   
	// Target Slider
	$('.image-gallery').lightSlider({ 
		gallery:true, 
		item:1, 
		auto:false, 
		loop:true, 
		thumbItem: 9,
		thumbMargin: 20,
		galleryMargin: 20,

		// On the LightSlider Load also load the Lightbox Magnific PopUp.						  
		onSliderLoad: function() {  
				
			$('.image-gallery').magnificPopup({ 
				delegate: 'a', 
				type: 'image',
					gallery:{
				    enabled:true,
				    navigateByImgClick: true,
					preload: [0,1] // Will preload 0 - before current, and 1 after the current image

			  	},
			  	zoom: {
				    enabled: true, // By default it's false, so don't forget to enable it
				    duration: 300, // duration of the effect, in milliseconds
				    easing: 'ease-in-out', // CSS transition easing function
				}
			});
         } 
	});

});

So in the above script after initializing the slider, the onSliderLoad function has the magnificPopup functionality added to the slides so when clicked they open up in a lightbox.

There are many options you can configure for the lightbox.

Leave a Comment





Scroll To Top