Image slider lightbox request

  • Resolved panandreas

    (@panandreas)


    6 years, 3 months ago

    It would be great if the image slider had a lightbox that includes all the images of the slider(with navigation I mean, not all at once)

    I have tried some lightbox plugins to do that on an image slider with 3 visible images out of 6 total images but the lighboxes always saw more images (15 in my case) cause of the way you implement the slider when the infinite loop is on.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Contributor motopress

    (@motopress)

    6 years, 3 months ago

    @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

});
    Thread Starter panandreas

    (@panandreas)

    6 years, 3 months ago

    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

    Thread Starter panandreas

    (@panandreas)

    6 years, 3 months ago

    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

    Thread Starter panandreas

    (@panandreas)

    6 years, 3 months ago

    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 6 years, 3 months ago by panandreas.
    • This reply was modified 6 years, 3 months ago by panandreas.
    Thread Starter panandreas

    (@panandreas)

    6 years, 3 months ago

    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 6 years, 3 months ago by panandreas.
    • This reply was modified 6 years, 3 months ago by panandreas.
    Plugin Support arsengunner

    (@arsengunner)

    6 years, 2 months ago

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

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Image slider lightbox request’ is closed to new replies.