How do I define a gallery of inline content in HTML for use with Magnific-Popup ?

Question

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 a

Answer 1

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