pinchZoomImage.js

function makeImageZoomable(panImg) {
	if (typeof panImg == 'string')
		panImg = document.getElementById(panImg);
	var panImgContainer = panImg.parentNode;
	
	var startScale;
	var currentScale = 1;
	var startX = 0;
	var startY = 0;
	var currentX = 0;
	var currentY = 0;
	panImgContainer.reset = function() {
		currentScale = 1;
		currentX = 0;
		currentY = 0;
		
		panImgContainer.applyTransform();
	}
	panImgContainer.applyTransform = function() {
		panImg.style.webkitTransform = panImg.style.transform = ' scale(' + currentScale + ') translate3d('+currentX+'px,'+currentY+'px,0px)';
	}
	panImgContainer.applyTransform();
	panImgContainer.ongesturestart = function(event) {
		event.preventDefault();
		startScale = currentScale;
	}
	panImgContainer.ongesturechange = function(event) {
		event.preventDefault();
		currentScale = startScale * event.scale;
		
		this.applyTransform();
	}
	panImgContainer.ongestureend = function(event) {
		this.removeEventListener('touchmove', this.touchmove, false);
	}
	panImgContainer.ontouchstart = function(event) {
		if(event.touches.length == 2) return;
		event.preventDefault();
		
		startX = event.touches[0].clientX - currentX * currentScale;
		startY = event.touches[0].clientY - currentY * currentScale;
		
		this.addEventListener('touchmove', this.touchmove, false);
	}
	panImgContainer.touchmove = function(event) {
		if(event.touches.length == 2) return;
		event.preventDefault();
		
		currentX = (event.touches[0].clientX - startX) / currentScale;
		currentY = (event.touches[0].clientY - startY) / currentScale;
		
		this.applyTransform();
	}
	panImgContainer.onmousewheel = function(event) {
		event.preventDefault();
		
		var delta = event.detail ? event.detail*(-120) : event.wheelDelta;
		currentScale += delta / 600;
		
		this.applyTransform();
	}
	panImgContainer.onmousedown = function(event) {
		event.preventDefault();
		
		startX = event.clientX - currentX * currentScale;
		startY = event.clientY - currentY * currentScale;
		
		this.addEventListener('mousemove', this.mousemove, false);
		document.addEventListener('mouseup', this.mouseup, false);
	}
	panImgContainer.mousemove = function(event) {
		event.preventDefault();
		
		currentX = (event.clientX - startX) / currentScale;
		currentY = (event.clientY - startY) / currentScale;
		
		this.applyTransform();
	}
	panImgContainer.mouseup = function(event) {
		panImgContainer.removeEventListener('mousemove', panImgContainer.mousemove, false);
		document.removeEventListener('mouseup', panImgContainer.mouseup, false);
	}
}