//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>