Magnific Popup Examples

June 11, 2019 6:26 pm by ATS Staff

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">
	<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

	<script type="text/javascript">
		jQuery(document).ready(function ($) {

			jQuery('.popup-map').magnificPopup({
			  	type: 'inline',
			  	mainClass: 'mfp-fade',
			  	fixedContentPos: false
			});

			jQuery('.thumbnails').magnificPopup({
				type:'image',
				delegate: 'a',
				gallery: { enabled: true }
			});

		  	jQuery('.popup-youtube, .popup-vimeo').magnificPopup({
			    type: 'iframe',
			    mainClass: 'mfp-fade',
			    removalDelay: 160,
			    preloader: true,
			    fixedContentPos: false
		  	});

		});	
	</script>


	<h3>Magnific Popup</h3>
	<a href="https://dimsemenov.com/plugins/magnific-popup/documentation.html" target="_blank">Documentation</a>
	<hr />


	<p>Map Div</p>
	<a href="#popup-map-div" class="popup-map">
		<img src="https://cdn.pixabay.com/photo/2016/10/08/18/35/the-location-of-the-1724293_960_720.png" width="100" />
	</a>
	<div id="popup-map-div" class="mfp-hide">
		<center><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d237685.0692940347!2d39.70646057504093!3d21.43595714304669!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x15c21b4ced818775%3A0x98ab2469cf70c9ce!2sMecca+Saudi+Arabia!5e0!3m2!1sen!2sca!4v1560287591017!5m2!1sen!2sca" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></center>
	</div>
	<hr />

	<p>Thumbnail Images</p>
	<div class="thumbnails">
		  <a class="thumbnail" href="https://placekitten.com/200/287" title="Kitten 1">
		    <img width="100" src="https://placekitten.com/200/287" title="Kitten 1" alt="Kitten 1" />
		  </a>                    

		  <a class="thumbnail" href="https://placekitten.com/200/286" title="Kitten 2">
		    <img width="100" src="https://placekitten.com/200/286" title="Kitten 2" alt="Kitten 2" />
		  </a>
	</div>
	<hr />

	<p>Video</p>
	<a class="popup-youtube" href="https://www.youtube.com/watch?v=lQWnIA0pJss" title="Video">
		<img src="https://cdn.pixabay.com/photo/2016/02/01/12/33/play-1173551_960_720.png" width="100" />
	</a>
	<hr />

Magnific Popup Documentation Here