<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
<a class="test-popup-link" href="http://farm4.staticflickr.com/3763/9204547649_7de96ee188_t.jpg">Open popup</a>
<div class="parent-container">
<a href="http://farm3.staticflickr.com/2856/9207329420_e485948b01_t.jpg" title="Test caption">Open popup 1</a>
<a href="http://farm3.staticflickr.com/2856/9207329420_e485948b01_t.jpg" title="Test caption">Open popup 2</a>
<a href="http://farm3.staticflickr.com/2856/9207329420_e485948b01_t.jpg" title="Test caption">Open popup 3</a>
</div>
<h3>this all items will show in one gallary</h3>
<div class="gallery">
<a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" title="Test caption">Open image 1 (gallery #1)</a>
<a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" title="Test caption">Open image 2 (gallery #1)</a>
</div>
<div class="gallery">
<a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" title="Test caption">Open image 1 (gallery #2)</a>
<a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" title="Test caption">Open image 2 (gallery #2)</a>
<a href="http://vimeo.com/123123" class="mfp-iframe">Open video (gallery #2). Class mfp-iframe forces "iframe" content type on this item.</a>
</div>
<script>
$(document).ready(function() {
$('.test-popup-link').magnificPopup({
type: 'image'
});
});
$('.parent-container').magnificPopup({
