title: How do I define a gallery of inline content in HTML for use with Magnific-Popup ?
body: <p>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 <code>.mfp-hide</code>. However I cannot get the popup to activate when I add the <code>delegate</code> keyword (it does otherwise).</p>
  
  <p>Here is the code I have so far,</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="gallery1" class="mfp-hide"&gt;
    &lt;div class="slide"&gt;
      ... some content for slide 1 ...
    &lt;/div&gt;
    &lt;div class="slide"&gt;
      ... some content for slide 2 ...
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;p&gt;Blah blah &lt;a href="#gallery1" class="open-gallery-link"&gt;view gallery one&lt;/a&gt; blah blah ...&lt;/p&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$('.open-gallery-link').magnificPopup({
    type:'inline',
    delegate:'.slide',
    gallery: {
      enabled: true
    }
  });
  </code></pre>