Image slider lightbox request

@panandreas

Add this code to functions.php of your theme/child theme. This is an example.

add_action('wp_footer', function (){

	if( ! has_block( 'getwid/images-slider' ) ){
		return;
	}

	wp_enqueue_script(
		'magnific-popup',
		getwid_get_plugin_url( 'vendors/magnific-popup/jquery.magnific-popup.min.js' ),
		[ 'jquery' ],
		'1.1.0',
		true
	);

	wp_enqueue_style(
		'magnific-popup',
		getwid_get_plugin_url( 'vendors/magnific-popup/magnific-popup.min.css' ),
		[],
		'1.1.0'
	);
	?>
	<script>
		(function($) {
            $(document).ready(function (e) {
                $('.wp-block-getwid-images-slider').magnificPopup({
                    delegate: '.slick-slide:not(.slick-cloned) a',
                    type: 'image',
                    tLoading: 'Loading image #%curr%...',
                    mainClass: 'mfp-img-mobile',
                    gallery: {
                        enabled: true,
                        navigateByImgClick: true,
                        preload: [0,1] // Will preload 0 - before current, and 1 after the current image
                    },
                    image: {
                        tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
                        titleSrc: function(item) {
                            return $(item.img)[0].alt;
                        }
                    }
                });
            });
        })(jQuery)
	</script>
	<?php

});

Thank you very much for your super fast response!

With your code the lightbox works better than using a lightbox plugin but still there is a little problem. The jquery lightbox shows the correct number(6) of images as a gallery (not counting and showing .slick-cloned slides) when I click on a slide which is not(.slick-cloned).

If I click on a .slick-cloned slide the lightbox just shows the specific slide.

Nevertheless this is a lot better than showing the same images twice

Thank you again for your great support

I was wrong… If I click on a .slick-cloned slide the lightbox isn’t working and I am redirected to image or attachment page

Some more feedback.

I changed the code you provided so magnificPopup will get all the slick slider images delegate: '.slick-slide a'

With that change I had all the images in the lightbox.

After that I changed the data.items in jquery.magnific-popup.min.js open function so they don’t include images with a .slick-cloned parent class.

data.items = data.items.filter(function( index ) {
	return $(data.items[index].offsetParent).filter(".slick-cloned").length===0;
})

or 

data.items = data.items.filter(function( index ) {
	return $($(this)[0].offsetParent).filter(".slick-cloned").length===0;
})

I am not an expert so I don't know which one of the two jquery filter(function) is more efficient, faster etc 

Now everything is working as expected.

The next step is the lightbox to include images only from the specific slider.

• This reply was modified 5 years ago by panandreas.
• This reply was modified 5 years ago by panandreas.

This is how I solved including images only from the specific slider. To have multiple galleries on a page, you need to create a new instance of Magnific Popup for each separate gallery. So I changed your code that I was including in functions.php with the bellow

<script>
   (function($) {
      $(document).ready(function (e) {            
         $('.wp-block-getwid-images-slider').each(function() { 
            $(this).magnificPopup({
               delegate: '.slick-slide a',
               type: 'image',
               tLoading: 'Loading image #%curr%...',
               mainClass: 'mfp-img-mobile',
               gallery: {
                  enabled: true,
                  navigateByImgClick: true,
                  preload: [0,1] // Will preload 0 - before current, and 1 after the current image
               },
               image: {
                  tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
                  titleSrc: function(item) {
                     return $(item.img)[0].alt;
                  }
               }
                })
         });
      });
   })(jQuery)
</script>

• This reply was modified 5 years ago by panandreas.
• This reply was modified 5 years ago by panandreas.

@panandreas

Thanks for your efforts and sharing your experience, it is much appreciated! I have noted these changes and passed the request for improvement to our developers.