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