Blog
Hacer zoom a imágenes con jQuery (elevatezoom)
Hoy vamos a dedicar nuestro tutorial a explicar cómo hacer zoom a imágenes con jQuery, usando el plugin elevatezoom, el cual se lo pueden descargar desde su sitio oficial.
Cómo hacer zoom a imágenes con jQuery
Una vez que ya tenemos descargado el código fuente del plugin podemos proceder a programar nuestro sencillo programa.
Como primer paso vamos a necesitar una imagen con dos resoluciones distintas (una chica y otra grande, pero con medidas proporcionales), la de resolución más chica la vamos a utilizar para mostrarla por defecto, cuando no se haga zoom, mientras que la de resolución más grande la vamos a utilizar para cuando se quiera hacer zoom (esto lo vamos a indicar con la propiedad data-zoom-image).
Entonces en nuestro HTML vamos a incluir la etiqueta img:
<img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>
Luego simplemente con Java Script vamos a configurar nuestra imagen para que se le pueda hacer zoom con solamente apoyar el cursor en un sector de la imagen:
$('#zoom_01').elevateZoom({
cursor: "crosshair", // Para que se muestre una cruz al apoyar el cursor sobre la imagen
zoomWindowFadeIn: 500, // El tiempo que tarda en mostrar el zoom al apoyar el cursor sobre la imagen
zoomWindowFadeOut: 750 // El tiempo que tarda en desaparecer el zoom al sacar el cursor sobre la imagen
});
Si ejecutamos el código anterior en nuestros navegadores el resultado sería el siguiente:
A continuación les dejo el código completo:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Hacer zoom a imágenes con jQuery (elevatezoom)</title>
<script src='jquery-1.8.3.min.js'></script>
<script src='jquery.elevatezoom.js'></script>
</head>
<body>
<img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>
<script>
$('#zoom_01').elevateZoom({
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
});
</script>
</body>
</html>
Bueno gente, eso es todo lo que se necesita para hacer zoom a imágenes con jQuery utilizando el plugin elevatezoom, espero que les sea de gran utilidad y si tienen algún problema no duden en enviar un mensaje.