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);