Zoom and pan images

Panzoom 3.2.2 Zoom in: click and mousewheel; Drag: pan

by 8ogdan

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/3.2.3/jquery.panzoom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>

<div class="control-zoom">
	<button class="zoom-in">Zoom In</button>
	<button class="zoom-out">Zoom Out</button>
	<button class="reset">Reset</button>
</div>		


<div class="content">

<div class="panzoom" id="advanced-zoom">
  <img src="https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687"/>
</div>

</div>

CSS

body {
  height: 100vh;  
}

.content {
  text-align: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.control-zoom {
  position: fixed;
  bottom: 0;
  z-index: 1;
}

.panzoom {
  display: inline-block;
  height: 100%;
  width: 100%;
}

.panzoom img {
  left: 0;
  margin: auto;
  max-height: calc(100vw * 520 / 1280);
  max-width: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

.panzoom:active {
  cursor: move!important;
}

JavaScript

var $panzoom = $('.panzoom').panzoom({
			contain: 'invert',
      $zoomIn: $('.zoom-in'),
      $zoomOut: $('.zoom-out'),
      //$zoomRange: $('.zoom-range'),
      //panOnlyWhenZoomed: true,
      $reset: $('.reset'),
		  cursor: 'zoom-in',
      minScale: 1,				  
		  maxScale: 2.8,
		  increment: 0.2,
		  transition: true,
      duration: 300,
		  preventMouseEventsDefault: false,
      easing: 'ease-in-out'
});	  
	  
	//click zoom 
//	$('.panzoom').on('click', function(e) {
//		e.preventDefault();
//		$panzoom.panzoom('zoom', {
//       increment: 0.3,			
//			 focal: e
//		 });
//	});	 
  
 //zoom mousewheel  
  $panzoom.parent().on('mousewheel.focal', function( e ) {
    e.preventDefault();
    var delta = e.delta || e.originalEvent.wheelDelta;
    var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
    $panzoom.panzoom('zoom', zoomOut, {
       increment: 0.6,
       animate: true,
       focal: e
    });
  });		
  
	//click zoom (double click because onclick doesn't work)
    var doubleClicked = false;
    $('.panzoom').on('click', function() {   
        if (doubleClicked) {
              $panzoom.panzoom('zoom', {
              increment: 0.5
              });
        }
        doubleClicked = true;
        setTimeout(() => {
            doubleClicked = false;
        }, 300);
    });