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 );