JSFiddle - React, Tailwind, and code Playground

by Oleg Khobotov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/3.1.1/jquery.panzoom.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
<div class="parent">
  <img class='panzoom' src='http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg' />
</div>
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>

CSS

.parent {
  width: 600px;
  height: 800px;
  background-color: black;
  position: relative;
}

.panzoom {
  width: 100%;
  height: auto;
}

JavaScript

var $section = $('.parent');
var $panzoom = $section.find('.panzoom').panzoom({
    $zoomIn: $(".zoom-in"),
    $zoomOut: $(".zoom-out"),
    increment: 0.1,
    animate: false,
    contain: 'automatic',
    panOnlyWhenZoomed: false,
    minScale: 1,
    maxScale: 3
});
$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, {
    focal: e,
  });
});