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.
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.
