Magnific Popup

Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device (for jQuery or Zepto.js). Read the official plugin documentation.

Examples

								
									<div class="row image-gallery">
									<a href="https://via.placeholder.com/1200x600" class="col-6 col-md-3 mb-4">
										<img src="https://via.placeholder.com/300x300" class="img-fluid">
									</a>
									<a href="https://via.placeholder.com/1200x600" class="col-6 col-md-3 mb-4">
										<img src="https://via.placeholder.com/300x300" class="img-fluid">
									</a>
									<a href="https://via.placeholder.com/1200x600" class="col-6 col-md-3 mb-4">
										<img src="https://via.placeholder.com/300x300" class="img-fluid">
									</a>
									<a href="https://via.placeholder.com/1200x600" class="col-6 col-md-3 mb-4">
										<img src="https://via.placeholder.com/300x300" class="img-fluid">
									</a>
									<a href="https://via.placeholder.com/1200x600" class="col-6 col-md-3 mb-4">
										<img src="https://via.placeholder.com/300x300" class="img-fluid">
									</a>
									<a href="https://via.placeholder.com/1200x600" class="col-6 col-md-3 mb-4">
										<img src="https://via.placeholder.com/300x300" class="img-fluid">
									</a>
									<a href="https://via.placeholder.com/1200x600" class="col-6 col-md-3 mb-4">
										<img src="https://via.placeholder.com/300x300" class="img-fluid">
									</a>
									<a href="https://via.placeholder.com/1200x600" class="col-6 col-md-3 mb-4">
										<img src="https://via.placeholder.com/300x300" class="img-fluid">
									</a>
									<a href="https://via.placeholder.com/1200x600" class="col-6 col-md-3 mb-4">
										<img src="https://via.placeholder.com/300x300" class="img-fluid">
									</a>
									<a href="https://via.placeholder.com/1200x600" class="col-6 col-md-3 mb-4">
										<img src="https://via.placeholder.com/300x300" class="img-fluid">
									</a>
									<a href="https://via.placeholder.com/1200x600" class="col-6 col-md-3 mb-4">
										<img src="https://via.placeholder.com/300x300" class="img-fluid">
									</a>
									<a href="https://via.placeholder.com/1200x600" class="col-6 col-md-3 mb-4">
										<img src="https://via.placeholder.com/300x300" class="img-fluid">
									</a>
								</div>
								
							
								
										// This will create a single gallery from all elements that have class "gallery-item"
	$('.image-gallery').magnificPopup({
		delegate: 'a', 
		type: 'image',
		removalDelay: 300,
		gallery:{
			enabled:true,
		},
		mainClass: 'mfp-with-zoom', 
		zoom: {
			enabled: true, 
			duration: 300,
			easing: 'ease-in-out',
			opener: function(openerElement) {
				return openerElement.is('img') ? openerElement : openerElement.find('img');
			}
		}
	});