<!-- 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')}}});

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