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