¿Cómo defino una galería de contenido en línea en HTML para usar con Magnific-Popup?

Tengo muchas galerías en una página que se lanzan desde sus respectivos botones. Me gusta la idea de definir el marcado para las galerías en la página junto al botón y luego ocultarlo usando el.mfp-hide. Sin embargo, no puedo activar la ventana emergente cuando agregodelegate palabra clave (lo hace de otra manera).

Aquí está el código que tengo hasta ahora,

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

Respuestas a la pregunta(1)

Su respuesta a la pregunta