jQuery

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:

Zoom con jQuery

Zoom con jQuery

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.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *