JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="container">
  <div id="slide">
    <img src="http://content.worldcarfans.co/2008/6/medium/9080606.002.1M.jpg"></img>
  </div>
</div>

CSS

#container{
  width:500px;
  height:500px;
  overflow:hidden;
}
#slide{
  width:100%;
  height:100%;
}
img{
  width:auto;
  height:auto;
  max-width:100%;
}

JavaScript

$(document).ready(function(){
	var scale = 1;
	$("#container").on("mousewheel DOMMouseScroll", function (e) {
  	e.preventDefault();
    var delta = e.delta || e.originalEvent.wheelDelta;
    var zoomOut;
    if (delta === undefined) {
      //we are on firefox
      delta = e.originalEvent.detail;
      zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
      zoomOut = !zoomOut;
    } else {
      zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
    }
    var touchX = e.type === 'touchend' ? e.changedTouches[0].pageX : e.pageX;
    var touchY = e.type === 'touchend' ? e.changedTouches[0].pageY : e.pageY;
    var translateX, translateY;
    if(zoomOut){
    	//we are zooming out
      //not interested in this yet
    }else{
    	//we are zooming in
      scale = scale + 0.5;
      var startScale = scale - 0.5;
      var slideWidth = $("#slide")[0].getBoundingClientRect().width;
      var slideHeight = $("#slide")[0].getBoundingClientRect().height;

			var lastTouchX, lastTouchY;
      var posx, posy;
      var allTheMouseOffsetsX = [], allTheMouseOffsetsY = [];
      if (startScale === 1) {
        //first time zoom in
        posx = 0;
        posy = 0;
        lastTouchX = touchX;
        lastTouchY = touchY;
        allTheMouseOffsetsX = [];
        allTheMouseOffsetsY = [];
      } else {
        posx = parseFloat($("#slide").data("translateXTemp"));
        posy = parseFloat($("#slide").data("translateYTemp"));
        lastTouchX = parseFloat($("#slide").data("touchX"));
        lastTouchY = parseFloat($("#slide").data("touchY"));
        allTheMouseOffsetsX = $("#slide").data("allTheMouseOffsetsX");
        allTheMouseOffsetsY = $("#slide").data("allTheMouseOffsetsY");
      }

			//[2] (startScale) is not used anywhere now
      allTheMouseOffsetsX.push([touchX, lastTouchX, startScale]);
      allTheMouseOffsetsY.push([touchY, lastTouchY, startScale]);
      
      $("#slide").data("allTheMouseOffsetsX", allTheMouseOffsetsX);
     ...