Magnific Popup не работает с несколькими галереями на странице

Question

Я использую полномасштабное всплывающее окно на новом веб-сайте, который я создаю, но я столкнулся с проблемой заставить его работать, когда несколько галерей на той же странице.

Я использую Wordpress, Slick Slider, чтобы отобразить ползунок, полный эскизов, и когда один из миниатюр щелкнул, он должен открыть большую версию изображения в Magnific Popup.

Мой HTML выглядит следующим образом:

<div class="media-carousel slick-initialized slick-slider" id="carousel-links"> 
<div class="slick-list draggable" tabindex="0"> 
    <div class="slick-track" style="opacity: 1; width: 1152px; transform: translate3d(0px, 0px, 0px);"> 
     <div class="slick-slide slick-active" data-slick-index="0" style="width: 288px;"> 
      <div class="standard_media_element media_title"> 
       <a href="image1-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal"> 
       <img src="image1.jpg" alt="" class="standard-image"></a> 
      </div> 
     </div> 
     <div class="slick-slide slick-active" data-slick-index="1" style="width: 288px;"> 
      <div class="standard_media_element media_title"> 
       <a href="image2-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal"> 
       <img src="image2.jpg" alt="" class="standard-image"></a> 
      </div> 
     </div> 
     <div class="slick-slide slick-active" data-slick-index="2" style="width: 288px;"> 
      <div class="standard_media_element media_title"> 
       <a href="image3-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal"> 
       <img src="image3.jpg" alt="" class="standard-image"></a> 
      </div> 
     </div> 
     <div class="slick-slide slick-active" data-slick-index="3" style="width: 288px;"> 
      <div class="standard_media_element media_title"> 
       <a href="image4-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal"> 
       <img src="image4.jpg" alt="" class="standard-image"></a> 
      </div> 
     </div> 
    </div> 
</div> 

У меня есть site.js файл, содержащий все JavaScript для моего сайта в нем. Я вызываю всплывающее окно с использованием следующей функции. Я добавил некоторые дополнительные материалы, чтобы добавить эффекты.

jQuery('#carousel-links').each(function() { 
jQuery(this).magnificPopup({ 
    delegate: 'a', 
    type: 'image', 
    tClose: 'Close (Esc)', 
    tLoading: '', 
      preload: [1,4], 
    gallery:{ 
     enabled:true, 
     tPrev: 'previous', 
     tNext: 'next', 
     tCounter: '%curr% of %total%' 
    }, 
    image: { 
     verticalFit: true, 
     titleSrc: function(item) { 
     return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.src+'" target="_blank"><i class="fa fa-file-image-o"></i> open original</a>'; 
     } 
    }, 
    closeBtnInside: false, 
    closeOnContentClick: false, 
    mainClass: 'mfp-zoom-in', 
    removalDelay: 300, //delay removal by X to allow out-animation 
    callbacks: { 
     lazyLoad: function (item) { 
      console.log(item); // Magnific Popup data object that should be loaded 
     }, 
     beforeOpen: function() { 
      jQuery('#carousel-links a').each(function(){ 
       jQuery(this).attr('title', $(this).find('img').attr('alt')); 
      }); 
     }, 
     open: function() { 
      //overwrite default prev + next function. Add timeout for css3 crossfade animation 
      jQuery.magnificPopup.instance.next = function() { 
       var self = this; 
       self.wrap.removeClass('mfp-image-loaded'); 
       setTimeout(function() { jQuery.magnificPopup.proto.next.call(self); }, 120); 
      } 
      jQuery.magnificPopup.instance.prev = function() { 
       var self = this; 
       self.wrap.removeClass('mfp-image-loaded'); 
       setTimeout(function() { jQuery.magnificPopup.proto.prev.call(self); }, 120); 
      } 
     }, 
     imageLoadComplete: function() { 
      var self = this; 
      setTimeout(function() { self.wrap.addClass('mfp-image-loaded'); }, 16); 
     } 
    } 
}); 
}); 

У меня есть точно такой же HTML код строит различные галереи выводя на той же странице и по каким-то причинам первая карусель с лайтбокса прекрасно работает. Но по какой-то причине вторая галерея не работает. Карусель отлично работает, но Magnific Popup не срабатывает. Когда я нажимаю на один из миниатюр, он открывает большее изображение в окне браузера.

Я проверил функцию js, добавив «console.log("clicked");» после .each. Я вижу консоль, на которую нажимается миниатюра, и эта часть работает.

Любая идея, как я могу заставить несколько слайдеров работать на моей странице?

Я попробовал пример из документации для нескольких галерей, удалив все из функции и сделав ее максимально возможной. Я получаю тот же результат, первый lightwindow работает, а второй - нет.

Я также не вижу никаких ошибок js на консоли.

UPDATE # 1 Это не идеальное решение, но я нашел способ сделать эту работу. Я должен был использовать уникальные идентификаторы на каждом слайдере, чтобы заставить лайтбокс работать, если несколько слайдеров находились на одной странице с использованием того же значения ID. В этом случае я использовал # карусель-ссылки для всех слайдеров. Я думаю, вы не можете использовать один и тот же идентификатор для слайдеров по всем направлениям и заставить этот лайтбокс работать?

Я также переместил код javascript сразу после карусели на странице шаблона модуля. Я удалил его сейчас из файла site.js.

Я не ищу способ оптимизации кода, поэтому могу разместить его на своем сайте. Js. Я попытаюсь захватить это значение идентификатора, используя класс на каждой карусели. Я отчитаю, если я смогу заставить это работать.

UPDATE # 2 - OMG Может проблема я имел, когда Lightbox работал только с первым экземпляром осветителя быть, потому что я был ID вместо класса, как мой селектор для осветителя? Я перешел на КЛАСС, и теперь они все работают.

Answer 1

Какая у меня проблема: я изменил селектор из идентификатора на класс в том же элементе. Это позволило нескольким галереям на одной странице работать вместе без проблем.