Cacher is the code snippet organizer for pro developers

// include these in the head
// {{ '//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/magnific-popup.css' | stylesheet_tag }}
// {{ '//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/jquery.magnific-popup.min.js' | script_tag }}

$(function() {
	$('.popup-gallery').magnificPopup({
	  delegate: 'a',
	  type: 'image',
	  gallery:{
	    enabled:true
	  }
	});
});
	  

/* Gallery Page */

.popup-gallery a {
  width: 150px;
  height: 150px;
  display: block;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}

<!-- Replace {{ page.content }} with -->

<div class="media-page">

  {% assign content = page.content | split: '{{start_gallery}}' | first %}
  
  {% assign images = page.content | split: '{{start_gallery}}' | last | remove: "{{start_gallery}}" | remove: '<img src=' | remove: ' />' | remove: '<p>' | remove: '</p>' | remove: " " | strip_newlines | split: '"' %}
  
  {% assign new_images = '' %}
  
  <div class="gallery-content">
  	{{ content }}
  </div>
  
  <div class="popup-gallery">
    {% for image in images %}
      {% if image != '' %}
        <a href="{{ image }}"><img src="{{ image }}" /></a>
      {% endif %}
    {% endfor %}
  </div>
  
</div>

This will find all the images on the page, and then make them open in Magnific Popup

Split out your content from the gallery images by including {{start_gallery}}.

For Example:

Lorem Ipsum dolor sit amet

{{start_gallery}}

<img src"..." />
<img src"..." />
<img src"..." />
<img src"..." />