How to define a gallery of embedded content in HTML for use with Magnific-Popup?

Question

I have many galleries on the page that start from their respective buttons. I like the idea of ​​defining the layout for the galleries on the page next to the button, and then hiding it with .mfp-hide . However, I cannot get the popup to activate when I add the delegate keyword (otherwise).

Here is the code that I still have,

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 } }); 

Answer 1

This does not work, the delegate always looking for children of the target DOM element (in your case, children of the .open-gallery-link element).

You can simply parse everything through jQuery and open the gallery via the 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