5

I have many galleries on a page which are launched from their respective buttons. I like the idea of defining the markup for the galleries in the page alongside the button and then hiding using the .mfp-hide. However I cannot get the popup to activate when I add the delegate keyword (it does otherwise).

Here is the code I have so far,

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
  }
});
Brendan
  • 18,771
  • 17
  • 83
  • 114

1 Answers1

8

It doesn't work this way, delegate is always looking for children of target DOM element (in your case children of element .open-gallery-link).

You may just parse everything via jQuery and open gallery via 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

Dmitry Semenov
  • 4,566
  • 2
  • 36
  • 39
  • Ah thanks, that is brilliant. I reasoned that if the activating DOM element (i.e. the `a` element in this case) pointed to another element (e.g. through the `href`) the target DOM element would be substituted for the one referred to in the `href` attribute. Still this way works just great - thanks again and great plugin! – Brendan Aug 06 '13 at 11:23