rohin

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
<h2>Magnific Popup: image zoom effect</h2>




<a href="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Anthochaera_chrysoptera.jpg/800px-Anthochaera_chrysoptera.jpg" class="without-caption image-link">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Anthochaera_chrysoptera.jpg/800px-Anthochaera_chrysoptera.jpg" width="172" height="115" />
</a>
<br/>
<a href="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Water_Dolphin.jpg/800px-Water_Dolphin.jpg" data-source="http://commons.wikimedia.org/wiki/Commons:Picture_of_the_day" class="with-caption image-link" title="The caption">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Water_Dolphin.jpg/800px-Water_Dolphin.jpg" width="172" height="105" />
</a>

CSS

.image-link {
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}


/* This block of CSS adds opacity transition to background */

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
  opacity: 0;
  -webkit-backface-visibility: hidden;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
  opacity: 1;
}

.mfp-with-zoom.mfp-ready.mfp-bg {
  opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
  opacity: 0;
}


/* padding-bottom and top for image */

.mfp-no-margins img.mfp-img {
  padding: 0;
}


/* position of shadow behind the image */

.mfp-no-margins .mfp-figure:after {
  top: 0;
  bottom: 0;
}


/* padding for main container */

.mfp-no-margins .mfp-container {
  padding: 0;
}


/* aligns caption to center */

.mfp-title {
  text-align: center;
  padding: 6px 0;
}

.image-source-link {
  color: #DDD;
}

body {
  -webkit-backface-visibility: hidden;
  padding: 10px 30px;
  font-family: "Calibri", "Trebuchet MS", "Helvetica", sans-serif;
}

JavaScript

$('.without-caption').magnificPopup({
  type: 'image',
  closeOnContentClick: true,
  closeBtnInside: false,
  mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
  image: {
    verticalFit: true
  },
  zoom: {
    enabled: true,
    duration: 300 // don't foget to change the duration also in CSS
  }
});

$('.with-caption').magnificPopup({
  type: 'image',
  closeOnContentClick: true,
  closeBtnInside: false,
  mainClass: 'mfp-with-zoom mfp-img-mobile',
  image: {
    verticalFit: true,
    titleSrc: function(item) {
      return item.el.attr('title') + ' &middot; <a class="image-source-link" href="' + item.el.attr('data-source') + '" target="_blank">image source</a>';
    }
  },
  zoom: {
    enabled: true
  }
});