Basic
image
<!-- Css --><link rel="stylesheet" href="vendors/lightbox/magnific-popup.css" type="text/css"><!-- Javascript --><script src="vendors/lightbox/jquery.magnific-popup.min.js"></script>
<a class="image-popup" href="big-image.jpg"> <img src="small-image.jpg" alt="image"></a>
$('.image-popup').magnificPopup({ type: 'image', zoom: { enabled: true, duration: 300, easing: 'ease-in-out', opener: function(openerElement) { return openerElement.is('img') ? openerElement : openerElement.find('img'); } }});
Gallery Version
image
image
image
image
image
image
<div class="row"> <div class="col-md-2 m-b-15"> <a class="image-popup-gallery-item" href="big-image.jpg"> <img src="small-image.jpg" class="img-fluid" alt="image"> </a> </div> <div class="col-md-2 m-b-15"> <a class="image-popup-gallery-item" href="big-image.jpg"> <img src="small-image.jpg" class="img-fluid" alt="image"> </a> </div> <div class="col-md-2 m-b-15"> <a class="image-popup-gallery-item" href="big-image.jpg"> <img src="small-image.jpg" class="img-fluid" alt="image"> </a> </div> <div class="col-md-2 m-b-15"> <a class="image-popup-gallery-item" href="big-image.jpg"> <img src="small-image.jpg" class="img-fluid" alt="image"> </a> </div> <div class="col-md-2 m-b-15"> <a class="image-popup-gallery-item" href="big-image.jpg"> <img src="small-image.jpg" class="img-fluid" alt="image"> </a> </div> <div class="col-md-2 m-b-15"> <a class="image-popup-gallery-item" href="big-image.jpg"> <img src="small-image.jpg" class="img-fluid" alt="image"> </a> </div></div>
let magnificPopupGalleryConfig = { type: 'image', gallery: { enabled: true }, zoom: { enabled: true, duration: 300, easing: 'ease-in-out', opener: function(openerElement) { return openerElement.is('img') ? openerElement : openerElement.find('img'); } }};$('.image-popup-gallery-item').magnificPopup(magnificPopupGalleryConfig);