Muchas veces vemos en las paginas web, sobre todo de moda, en las que al situarnos con el ratón encima de una foto esta se amplia, en esta entrada os vamos a enseñar a realizar este efecto con un plugin de jquery, uno de los plugins de jquery más sencillo y más versátil es el elevate zoom, en esta web (http://www.elevateweb.co.uk/image-zoom/examples) podemos encontrar el plugin ademas de unos ejemplos en loscuales al pinchar en «Show the Code» nos mostrará el código que debemos introducir en nuestra web para que funcione.

Lo primero que debemos hacer es descargarnos el plugin de su página, que contiene ademas un ejemplo y varios archivos más que no vamos a necesitar o descargarte los archivos necesarios desde este enlace: Elevate Zoom

Una vez descargado el archivo le descomprimimos en nuestra carpeta, a continuación diseñamos una galería de imágenes de la siguiente forma:

<ul class="galeria">
    	<li><img src="mujer1-peque.jpg" width="350" height="350" data-zoom-image="mujer1.jpg" alt="" id="foto1"></li>
    	<li><img src="mujer2-peque.jpg" width="350" height="350" data-zoom-image="mujer2.jpg" alt="" id="foto2"></li>
    	<li><img src="mujer3-peque.jpg" width="350" height="350" data-zoom-image="mujer3.jpg" alt="" id="foto3"></li>
    </ul>

Si nos damos cuenta hemos puesto la imagen en pequeño para que se muestre en pantalla y hemos añadido una propiedad que se llama «data-zoom-image» en la que ponemos la foto en grande para realizar el zoom y ademas a cada foto le hemos puesto un id diferente para realizar diferentes efectos de zoom. Para que tenga forma de galería incluiremos el siguiente estilo css dentro de la pagina o en la hoja de estilos correspondiente:

<style type="text/css">
 .galeria {
	padding: 0px;
	margin: 0px;
	list-style-type: none;
}
.galeria li{
	width:350px;
	height:350px;
	margin:20px;
	float:left;
	display:block;
}
</style>

Una vez realizado estos pasos nos faltaría por incluir los script jquery y elevatezoom al final de nuestra pagina por delante del </body>

<script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="js/jquery.elevateZoom-3.0.8.min.js"></script>

Una vez incluidos nos faltaría por inicializar el zoom, la forma más sencilla es:

<script type="text/javascript">
	$("#foto1").elevateZoom();
</script>

Así tenemos un zoom normal, en las siguientes lineas ponemos a la foto 2 un zoom sombreando o tintando la zona de la imagen sin zoom y en la foto 3 un zoom posicionado a la derecha de la imagen y que se puede ampliar o reducir con la rueda del raton.

<script type="text/javascript">
	$("#foto2").elevateZoom({
		tint:true, 
		tintColour:'#F90', 
		tintOpacity:0.5
	}); 	
	$("#foto3").elevateZoom({
	       scrollZoom : true,
	       zoomWindowPosition: 10
	});
</script>

Para ver el resto de códigos visitaríamos a web del autor.