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 already loaded, it’s a very popular lightbox and may well already be running on a site you are trying to do this on.

	// Target Slider
		thumbItem: 9,
		thumbMargin: 20,
		galleryMargin: 20,

		// On the LightSlider Load also load the Lightbox Magnific PopUp.						  
		onSliderLoad: function() {  
				delegate: 'a', 
				type: 'image',
				    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.