image zoom used in magento2

image zoom used in magento2

<!-- fotorama.css & fotorama.js. -->
<link  href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script> <!-- 16 KB -->

<!-- 2. Add images to <div class="fotorama"></div>. -->
<div class="fotorama"  data-allowfullscreen="true" data-fit="scaledown" data-nav="thumbs">
  <img src="https://s.fotorama.io/1.jpg">
  <img src="https://s.fotorama.io/2.jpg">
</div>
<script type="text/javascript">
var $fotoramaDiv = jQuery('.fotorama').fotorama({
  click:false,
  allowfullscreen:true,
});

    // 2. Get the API object.
    var fotorama = $fotoramaDiv.data('fotorama');
jQuery('.fotorama').on("click", '.fotorama__img', function () {

    fotorama.requestFullScreen();
    jQuery('.fotorama .fotorama__fullscreen-icon').trigger("click");
});


</script>