Как определить галерею встроенного контента в HTML для использования с Magnific-Popup?

У меня есть много галерей на странице, которые запускаются с соответствующих кнопок. Мне нравится идея определять разметку для галерей на странице рядом с кнопкой, а затем скрывать ее с помощью .mfp-hide. Однако я не могу активировать всплывающее окно, когда добавляю ключевое слово delegate (в противном случае).

Вот код, который у меня есть до сих пор,

HTML

<div id="gallery1" class="mfp-hide">
  <div class="slide">
    ... some content for slide 1 ...
  </div>
  <div class="slide">
    ... some content for slide 2 ...
  </div>
</div>

<p>Blah blah <a href="#gallery1" class="open-gallery-link">view gallery one</a> blah blah ...</p>

Javascript

$('.open-gallery-link').magnificPopup({
  type:'inline',
  delegate:'.slide',
  gallery: {
    enabled: true
  }
});

javascript jquery css magnific-popup
person Brendan    schedule 05.08.2013    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Это не работает, delegate всегда ищет дочерние элементы целевого элемента DOM (в вашем случае дочерние элементы элемента .open-gallery-link).

Вы можете просто разобрать все через jQuery и открыть галерею через API:

$('.open-gallery-link').click(function() {

  var items = [];
  $( $(this).attr('href') ).find('.slide').each(function() {
    items.push( {
      src: $(this) 
    } );
  });

  $.magnificPopup.open({
    items:items,
    gallery: {
      enabled: true 
    }
  });
});

http://codepen.io/dimsemenov/pen/zvLny

person Dmitry Semenov    schedule 06.08.2013
comment
А, спасибо, это гениально. Я рассудил, что если активирующий элемент DOM (т. е. элемент a в данном случае) указывает на другой элемент (например, через href), целевой элемент DOM будет заменен элементом, указанным в атрибуте href. Тем не менее этот способ работает просто отлично - еще раз спасибо и отличный плагин! - person Brendan; 06.08.2013