file dependency

• magnific-popup.css
• magnific-popup.js
• jquery

magnific-popup can be downloaded from http://dimsemenov.com/plugins/magnific-popup/ page

Html part

<div class='mainsingle__content__image'>
  <ul>
    <li>
      <a class='single-image-group' href='assets/images/product_image/0518254500_1_1_1.jpg'> <img src='assets/images/product_image/0518254500_1_1_1.jpg' alt=''/> </a>
      <a class='single-image-group' href='assets/images/product_image/0518254500_2_1_1.jpg'> <img src='assets/images/product_image/0518254500_2_1_1.jpg' alt=''/> </a>
      <a class='single-image-group' href='assets/images/product_image/0518254500_2_2_1.jpg'> <img src='assets/images/product_image/0518254500_2_2_1.jpg' alt=''/> </a>
      <a class='single-image-group' href='assets/images/product_image/0518254500_2_3_1.jpg'> <img src='assets/images/product_image/0518254500_2_3_1.jpg' alt=''/> </a>
      <a class='single-image-group' href='assets/images/product_image/0518254500_2_4_1.jpg'> <img src='assets/images/product_image/0518254500_2_4_1.jpg' alt=''/> </a>
      <a class='single-image-group' href='assets/images/product_image/0518254500_2_5_1.jpg'> <img src='assets/images/product_image/0518254500_2_5_1.jpg' alt=''/> </a>
      <a class='single-image-group' href='assets/images/product_image/0518254500_2_6_1.jpg'> <img src='assets/images/product_image/0518254500_2_6_1.jpg' alt=''/> </a>
    </li>
  </ul>
</div>

css part

all css scoped under .singleproduct by passing mainClass: 'singleproduct', in js when initialize magnific-popup

.singleproduct {
  .mfp-img {
   cursor: pointer;
  }
  .mfp-force-scrollbars {
    &.mfp-wrap {
        overflow-y: auto !important;
        overflow-x: auto !important;
    }
    .mfp-img {
      max-width: none;
    }
    .mfp-close {
     position: fixed;
    }

  }
}

js part

$(document).ready(function() {
  $('.mainsingle__content__image').magnificPopup({
    delegate: 'a.single-image-group',
    type: 'image',
    tLoading: 'Loading image #%curr%...',
    mainClass: 'singleproduct',
    gallery: {
      enabled: true,
      navigateByImgClick: true,
      preload: [0,1] // Will preload 0 - before current, and 1 after the current image
    },
    callbacks: {
      open: function() {
        var self = this;
        self.wrap.on('click.pinhandler', 'img', function() {
          self.wrap.toggleClass('mfp-force-scrollbars');
        });
      },
      beforeClose: function() {
            this.wrap.off('click.pinhandler');
        this.wrap.removeClass('mfp-force-scrollbars');
      }
    },

    image: {
      verticalFit: false
    }
  });

});

we can use magnific-popup as modal plugin as well

html part

<a class="fs75 popup-modal"  href="#size_customization_modal">
  What's my size? <i class="fas fa-cut"></i>
</a>
<div id='size_customization_modal' class="white-popup-block mfp-hide">
  <h1>Size Modal - will be placed appropriate content later</h1>
  <p>You won't be able to dismiss this by usual means (escape or
    click button), but you can close it programatically based on
    user choices or actions.</p>
  <p><a class="popup-modal-dismiss" href="#">Dismiss</a></p>
</div>

css part

.white-popup-block  {
    background: #FFF;
    padding: 20px 30px;
    text-align: left;
    max-width: 650px;
    margin: 40px auto;
    position: relative;
}

js part

$('.popup-modal').magnificPopup();