<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css" />
<style>
  .zoom {
    display: inline-block;
    position: relative;
  }

  .zoom img {
    display: block;
  }

  .zoom img::selection {
    background-color: transparent;
  }

  .fancybox-slide.fancybox-slide--html .fancybox-content {
    padding: 35px;
    max-width: 90% !important;
    height: 95% !important;
  }

  a[data-fancybox="zoom-gallery-desktop"] {
    cursor: zoom-in;
  }

  #modal {
    cursor: zoom;
  }

  .fancybox-slide--html .fancybox-content {
    max-width: 100% !important;
    width: 100%;
    max-width: initial !important;
    cursor: move !important;
  }

  #modal img {
    width: 100%;
  }

  span#zoom1 {
    cursor: move;
  }
</style>

<!-- HTML -->
<header>
<a style="max-width: 600px;">
    <h1>FancyZoom</h1>
</a>
</header>

<hr>
<h2>Desktop Only</h2>
<!-- button -->
<a data-fancybox="zoom-gallery-desktop" data-src="#modal" href="javascript:;" class="zoom">
  <img src='https://picsum.photos/2001/901' style="width: 100%; height: auto;" alt='Thumbnail'/>  
</a>
<!-- modal  -->
<section data-fancybox-close style="display: none;" id="modal">
  <header style="display:block; margin-top:-18px;">
    <h3 style="margin-top:-28px;margin-bottom:8px;position:relative; bottom: 1px;">Image title</h3> 
  </header>

  <span class='zoom' id='zoom1' style="height:95vh;">
<img style="min-width:100%; width:100%;height: auto;" src='https://picsum.photos/2001/901' salt='Baby Wallper'/>
</span>
</section>

<h3>Mobile Only</h3>
<!-- MOBILE thumbnail -->
<a data-caption="Image title" data-fancybox="zoom-gallery-mobile" href="https://picsum.photos/2001/901">
  <img style="width:100%; height:auto;" src="https://picsum.photos/2001/901">
  </a>

<!-- JS ########################### ->
  <!-- fancybox image zoom -->
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js"></script>
<!-- jquery zoom -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>
<script>
  $(document).ready(function() {
    $('#zoom1').zoom({
      magnify: "1.5",
    });
  });
</script>
<!-- fancybox install -->
<script>
  $(document).ready(function() {
    $('[data-fancybox="zoom-gallery-desktop"]').fancybox({
      // Options will go here
      buttons: [
        "zoom",
        "fullScreen",
        "close"
      ],
      fullScreen: {
        autoStart: false,
      },
      touch: {
        vertical: true, // Allow to drag content vertically
        momentum: true // Continuous movement when panning
      },
      openEffect: 'none',
      closeEffect: 'none',
      afterShow: function(instance, current) {
        //$(".fancybox").zoom({on:"click"});   
      }
    });
    $('[data-fancybox="zoom-gallery-mobile"]').fancybox({
      // Options will go here
      buttons: [
        "zoom",
        "fullScreen",
        "close"
      ],
      fullScreen: {
        autoStart: false,
      },
      afterShow: function() {
        /* $('.fancybox-button--zoom').click(); */
      }
    });
  });
</script>

body{
  max-width:400px;
}