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.
2 comments
Tommy Bordas
Hi,
What have you done to install magnific popup ?
I load it like in this post but when i’m on a slide it does not work sadly.
https://wpbeaches.com/image-carousel-thumbnail-slider-acf-gallery-field-wordpress/
wp_enqueue_style( ‘lightslidercss’, get_stylesheet_directory_uri(). ‘/css/lightslider.min.css’ , array(), ‘1.0.0’, ‘all’ );
wp_enqueue_style( ‘lightslidercss’, get_stylesheet_directory_uri(). ‘/css/magnific-popup.css’ , array(), ‘1.0.0’, ‘all’ );
wp_enqueue_script( ‘lightsliderjs’, get_stylesheet_directory_uri() . ‘/js/lightslider.min.js’, array( ‘jquery’ ), ‘1.0.0’, true );
wp_enqueue_script( ‘lightsliderjs’, get_stylesheet_directory_uri() . ‘/js/jquery.magnific-popup.js’, array( ‘jquery’ ), ‘1.0.0’, true );
wp_enqueue_script( ‘lightsliderinit’, get_stylesheet_directory_uri() . ‘/js/lightslider-init.js’, array( ‘lightsliderjs’ ), ‘1.0.0’, true );
Best regards
Tommy Bordas
Hi,
How do you load magnific popup in functions.php ?
I can popup on a picture, but the image don’t slide…
I use JQuery 3.6.0
Here is how I load the custom script :
wp_enqueue_style( ‘lightslidercss’, get_stylesheet_directory_uri(). ‘/css/lightslider.min.css’ , array(), ‘1.0.0’, ‘all’ );
wp_enqueue_style( ‘lightslidercss’, get_stylesheet_directory_uri(). ‘/css/magnific-popup.css’ , array(), ‘1.0.0’, ‘all’ );
wp_enqueue_script( ‘lightsliderjs’, get_stylesheet_directory_uri() . ‘/js/lightslider.min.js’, array( ‘jquery’ ), ‘1.0.0’, true );
wp_enqueue_script( ‘lightsliderjs’, get_stylesheet_directory_uri() . ‘/js/jquery.magnific-popup.js’, array( ‘jquery’ ), ‘1.0.0’, true );
wp_enqueue_script( ‘lightsliderinit’, get_stylesheet_directory_uri() . ‘/js/lightslider-init.js’, array( ‘lightsliderjs’ ), ‘1.0.0’, true );