panandreas

Forum Replies Created

Viewing 4 replies - 1 through 4 (of 4 total)
  • Forum: Plugins
    In reply to: [Getwid - Gutenberg Blocks] Image slider lightbox request
    Thread Starter panandreas

    (@panandreas)

    6 years, 2 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, 2 months ago by panandreas.
    • This reply was modified 6 years, 2 months ago by panandreas.
    Forum: Plugins
    In reply to: [Getwid - Gutenberg Blocks] Image slider lightbox request
    Thread Starter panandreas

    (@panandreas)

    6 years, 2 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, 2 months ago by panandreas.
    • This reply was modified 6 years, 2 months ago by panandreas.
    Forum: Plugins
    In reply to: [Getwid - Gutenberg Blocks] Image slider lightbox request
    Thread Starter panandreas

    (@panandreas)

    6 years, 2 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

    Forum: Plugins
    In reply to: [Getwid - Gutenberg Blocks] Image slider lightbox request
    Thread Starter panandreas

    (@panandreas)

    6 years, 2 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

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