Hacer Zoom en una imagen

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

Zoomy nos ofrece un plugin jQuery para realizar el efecto Zoom (o efecto lupa) sobre imágenes, aunque también es posible realizar zoom sobre texto, en definitiva cualquier fichero en formato de imagen.

Funciona de forma muy sencilla, subimos dos fotografías, una miniatura y otra de tamaño normal, de esta forma conseguiremos una vez insertados los códigos y llamadas a la función mostrar una parte aumentada (será la fotografía a tamño normal) dejando el resto en su tamaño original (será la imagen en miniatura).

También permite escoger el tipo de lupa entre redondo cuadrado y tamaño.

Añade en la cabecera de tu página las llamadas a jQuery

<link type=”text/css” rel=”stylesheet” href=”path-to/zoom1.0.css”/>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js”></script>
<script type=”text/javascript” src=”path-to/zoomy1.0.js.”></script>

Añade en la imagen para realizar el efecto zoom

<a href=”zoomImg.jpg”>
<img src=”displayImg.jpg” alt=”This is the Display Image” />
</a>

Para terminar, agregar este fragmento de código JavaScript para iniciar Zoomy

$(function(){
$(‘.zoom’).zoomy();
})(jQuery)

Nota: Zoomy utiliza tres tipos distintos de estilos CSS3, para su correcta visualización en los diferentes navegadores, también es posible desactivar las opciones que utilizan CSS3 para conseguir una mayor compatibilidad.

Un comentario

  1. busco descargas dijo:
    7 agosto, 2011
    Responder

    Me parece una herramienta genial que permite ofrecer una ayuda inestimable a personas con deficiencias visuales a la par que nos permite mostrar archivos más pequeños en nuestra web…

    Gracias y saludos

Deja un comentario

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

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.