Title: panandreas's Replies | WordPress.org

---

# panandreas

  [  ](https://wordpress.org/support/users/panandreas/)

 *   [Profile](https://wordpress.org/support/users/panandreas/)
 *   [Topics Started](https://wordpress.org/support/users/panandreas/topics/)
 *   [Replies Created](https://wordpress.org/support/users/panandreas/replies/)
 *   [Reviews Written](https://wordpress.org/support/users/panandreas/reviews/)
 *   [Topics Replied To](https://wordpress.org/support/users/panandreas/replied-to/)
 *   [Engagements](https://wordpress.org/support/users/panandreas/engagements/)
 *   [Favorites](https://wordpress.org/support/users/panandreas/favorites/)

 Search replies:

## Forum Replies Created

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

 *   Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/)
    In
   reply to: [[Getwid - Gutenberg Blocks] Image slider lightbox request](https://wordpress.org/support/topic/image-slider-lightbox-request/)
 *  Thread Starter [panandreas](https://wordpress.org/support/users/panandreas/)
 * (@panandreas)
 * [6 years, 2 months ago](https://wordpress.org/support/topic/image-slider-lightbox-request/#post-12465136)
 * 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](https://wordpress.org/support/users/panandreas/).
    -  This reply was modified 6 years, 2 months ago by [panandreas](https://wordpress.org/support/users/panandreas/).
 *   Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/)
    In
   reply to: [[Getwid - Gutenberg Blocks] Image slider lightbox request](https://wordpress.org/support/topic/image-slider-lightbox-request/)
 *  Thread Starter [panandreas](https://wordpress.org/support/users/panandreas/)
 * (@panandreas)
 * [6 years, 2 months ago](https://wordpress.org/support/topic/image-slider-lightbox-request/#post-12464161)
 * 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](https://wordpress.org/support/users/panandreas/).
    -  This reply was modified 6 years, 2 months ago by [panandreas](https://wordpress.org/support/users/panandreas/).
 *   Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/)
    In
   reply to: [[Getwid - Gutenberg Blocks] Image slider lightbox request](https://wordpress.org/support/topic/image-slider-lightbox-request/)
 *  Thread Starter [panandreas](https://wordpress.org/support/users/panandreas/)
 * (@panandreas)
 * [6 years, 2 months ago](https://wordpress.org/support/topic/image-slider-lightbox-request/#post-12463635)
 * 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](https://wordpress.org/support/forum/plugins-and-hacks/)
    In
   reply to: [[Getwid - Gutenberg Blocks] Image slider lightbox request](https://wordpress.org/support/topic/image-slider-lightbox-request/)
 *  Thread Starter [panandreas](https://wordpress.org/support/users/panandreas/)
 * (@panandreas)
 * [6 years, 2 months ago](https://wordpress.org/support/topic/image-slider-lightbox-request/#post-12463395)
 * 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)