jQuery Touch Zoom

Hoy os voy a enseñar un zoom táctil o touch zoom creado por mi. Seguro que todos nos hemos encontrado alguna vez con el problema de aplicar un zoom usable en dispositivos touch pero claro, el que tenemos en desktop no nos sirve ya que normalmente funciona con eventos de mouse como click, mousemove o mouseover.

Con el siguiente código os voy a dar una alternativa muy interesante a estos zooms y vamos a ver como crear nuestro propio zoom táctil sin mucho esfuerzo.

Lo primero de todo os dejo aquí un enlace a la DEMO para que podáis probarlo fácilmente. (NOTA: debéis abrir la demo o bien con un dispositivo táctil o poniendo el chrome en modo responsive para que se controle como un dispositivo táctil).

HTML

	
		<div class="boxContent">
			<div class='zoom' style="background-image: url('http://www.ikea.com/PIAimages/0143749_PE303250_S5.JPG'); background-size: 100%; transform: scale(1);">

				<img src="http://www.ikea.com/PIAimages/0143749_PE303250_S5.JPG" class="imgZoom"/>

			</div>
		</div>
		
	

Para este ejemplo he utilizado una imagen de IKEA por lo que puede que en algún momento esa imagen esté rota si leeis este post dentro de un tiempo.

CSS

	
		body{
			overflow:hidden;
		}

		img{
			width: 100%;
			height: auto;
			cursor: zoom-out;
			visibility: hidden; 
		}

		.zoom {
			width: 100%;
			height: 100%;
			transition: transform 0.2s ease-out 0s;
			background-position: center center;
			background-repeat: no-repeat;
		}

		.boxContent {
			padding: 0;
			margin: 0;
			overflow: hidden;
			padding-right: 20px;
			width: 100%;
			box-sizing: content-box;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	
	

Para el CSS simplemente nos aseguramos de que la imagen se ve al 100% de la pantalla y que no habrá ninguna barra de scroll visible.

Javascript

	
		var zoomIn = false;
		var start = {x:0,y:0};
			
		$('.zoom').on('touchstart', function(e){
			
			start.x=(e.originalEvent.touches[0].clientX);
			start.y=(e.originalEvent.touches[0].clientY);

			var origin = (e.originalEvent.touches[0].clientX) + 'px ' + (e.originalEvent.touches[0].clientY) + 'px';
			$(this).css('transform','scale(2)');
			$(this).css('transform-origin', origin);
			zoomIn = true;

		})
		
		$('.zoom').on('touchend', function(e){

			$(this).css('transform','scale(1)');
			zoomIn = false;

		})	
		
		$('.zoom').on('touchmove', function(e){

			var deltaX = e.originalEvent.touches[0].clientX - start.x; 
			var deltaY = e.originalEvent.touches[0].clientY - start.y; 
			
			var origin = (start.x - deltaX) + 'px ' + (start.y - deltaY) + 'px';

			
			$(this).css('transform-origin', origin);
		});	
		
	

Por último, añadimos nuestro script que lo único que hará será detectar cuando el usuario pulsa sobre la pantalla y en ese momento hará el zoom cambiando el scale y el origin para que la animación sea fluida y limpia. Al dejar de pulsar volverá a su estado original.

Esto es una base, luego se puede combinar con carruseles, popups o lo que se nos ocurra.

Espero que os sirva de ayuda.