Использование масштабного всплывающего окна внутри Обоснованной галереи

Question

Я пытаюсь использовать Magnific Popup внутри Justified Gallery, и у меня возникают проблемы. Кажется, он не собирает теги привязки, которые я хочу, чтобы он работал, и щелчок по изображению просто заканчивается прямо в местоположении href.

Я знаю, что это работает на странице, потому что если я рука написать какую-ванильный разметку, она отлично работает:

<a class="gallery-image" href="http://localpath/imagelarge.jpg"> 
    <img src="http://localpath/imagethumb.jpg"> 
</a> 

Однако, поскольку я использую Justified Gallery, разметка генерируется не совсем то же самое:

<div class="justifiedGallery" id="gallery"> 
    <div class="jg-row" style="height: 128px; margin-bottom: 1px;"> 
     <div class="jg-image" style="left: 0px;"> 
      <a class="gallery-image" href="http://localpath/imagelarge.jpg"> 
       <img style="width: 192px; height: 128px; display: inline; opacity: 1;" alt="undefined" src="http://localpath/imagethumb.jpg"> 
      </a> 
     </div> 
    </div> 
</div> 

Вот JavaScript, что я использую как для рабочего образца, и никто не работает один:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#gallery").justifiedGallery({ 
      'usedSuffix': 'lt240', 
      'justifyLastRow': false, 
      'rowHeight': 120, 
      'fixedHeight': false, 
      'captions': false, 
      'margins': 1 
     }); 

     $('.gallery-image').magnificPopup({ 
      type: 'image' 
     }); 
    }); 
</script> 

Мне нужно было настроить «Обоснованную галерею», чтобы добавить класс галереи-изображения, но все остальное - запас.

Я думаю, что есть что-то противоречивое, но я не могу отследить его.

Кто-нибудь использовал эти два раньше? Что-то не так с тем, как я инициализирую Magnific?

Answer 1

Вы можете добавить только:

$("#gallery").justifiedGallery({ 
     'usedSuffix': 'lt240', 
     'justifyLastRow': false, 
     'rowHeight': 120, 
     'fixedHeight': false, 
     'captions': false, 
     'margins': 1 
    }).magnificPopup({type:'image', delegate: '.gallery-image'}); 

Answer 2

Раньше я не использовал плагин Justified Gallery, но, как я вижу, ваша разметка верна. Держу пари, есть ситуации, при галерее инициализации,

Галерея плагин может манипулировать DOM, поэтому я предлагаю связать Magnific всплывающего окна, когда галерея заканчивает свою инициализацию, вы можете использовать OnComplete (оправданный) Галерею обратного вызова.