View difference between Paste ID: czMsjg1C and 4n2QnKds

 //image to pinch
 <img  id="hammerFrame" src="images/tutorials.jpeg" />
 				<script>
 					var myElement = document.getElementById('hammerFrame');
 					var mc = new Hammer.Manager(myElement);
 					var webpage = document.querySelector("#hammerFrame");
 
 					// create a pinch and rotate recognizer
 					// these require 2 pointers
 					var pinch = new Hammer.Pinch();
 					var rotate = new Hammer.Rotate();
 
 					// we want to detect both the same time
 					pinch.recognizeWith(rotate);
 
 					// add to the Manager
 					mc.add([pinch]);
 
 					//Default scales value
 					var adjustScale = 1;
 					var adjustDeltaX = 0;
 					var adjustDeltaY = 0;
 
 					var currentScale = null;
 					var currentDeltaX = null;
 					var currentDeltaY = null;
 
 					mc.on("pinch", function(ev) {
 
 					    var transforms = [];
 
 						// Adjusting the current pinch/pan event properties using the previous ones set when they finished touching
 						currentScale = adjustScale * ev.scale;
 						currentDeltaX = adjustDeltaX + (ev.deltaX / currentScale);
 						currentDeltaY = adjustDeltaY + (ev.deltaY / currentScale);
 
 						// Concatinating and applying parameters.
 						transforms.push('scale(' + currentScale + ')');
 						//transforms.push('translate(' + currentDeltaX + 'px,' + currentDeltaY + 'px)');
 						webpage.style.transform = transforms.join(' ');
 					});
 
 					mc.on("pinchend", function (ev) {
 
 						// Saving the final transforms for adjustment next time the user interacts.
 						adjustScale = currentScale;
 						adjustDeltaX = currentDeltaX;
 						adjustDeltaY = currentDeltaY;
 
 					});
 				</script>