Zoomy – Ampliar imagen con efecto lupa

Zoomy es un plugin jQuery rápido y fácil para aplicar zoom en una imagen. Es un plugin zoom flexible y se puede utilizar con dos copias de la misma imagen a distintos tamaños, es decir, utilizando thumbnails o una única imagen ajustando el tamaño.

La mayoría de los sistemas CMS guardan o crear múltiples tamaños de la imagen por lo que puede ser fácilmente configurado.

Si nos fijamos en la imagen anterior vemos que el efecto de lupa que se produce al pasar el puntero del ratón por encima de la imagen.

Para disponer de esta funcionalidad tan solo tienes que añadir en el <head> de tu página los estilos necesarios, la librería jQuery, el plugin y su llamada:

<link type="text/css" href="zoomy.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript" src="zoomy.min.js"></script>
<script type="text/javascript">
$(function () {
    $('.zoom').zoomy();
});
</script>

Los archivo incluidos los puedes descargar de la página oficial del plugin.

En el <body> de la página tendremos el link con la imagen de la siguiente manera:

<a href="sports.jpg" class="zoom"><img src="sports.jpg" width="320px" height="240px" /></a>

Tienes que poner el enlace del zoom de imagen más grande en la imagen de la pantalla más pequeña, y decirle al plugin para usar ese enlace al hacer zoom. Sólo se necesita la llamada al plugin.

Ver más documentación

Ver ejemplo en funcionamiento

Autor
Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (6 votos, promedio: 5,00 de 5)
Cargando…
Comparte en las redes sociales

15 respuestas a “Zoomy – Ampliar imagen con efecto lupa”

  1. Hola Jose,

    enhorabuena por tu blog. Es muy interesante.
    Estoy intentando implementar este efecto a las fotos de neumáticos de la web.
    He hecho todos los pasos y he comprobado que estuvieran reconocidos por el explorador, vía Firebug (javascripts, css, link, etc) y parece que es correcto.

    Por ejemplo este link http://www.yofindo.com/marcas-neumaticos/ROA/CP-661/205/55/16/V/91/2055516ROCP-661V

    No doy con el fallo.
    Me puedes echar una mano, por favor?

    Un saludo, y gracias!

    • Jose Aguilar dice:

      Hola buenas tardes,

      Por lo que veo pueden ser 2 cosas:

      1- Te falta que la imagen tenga un class=”zoom”.

      Si con esto no te funciona,

      2- Tendrás que actualizar el jquery que utilizas.

      Saludos,

  2. gerardo dice:

    Hola Como puedo ponerle zoom aun imagen que esta en un <MAP y solo ponerle en un lugar especifico el zoom

  3. jesus dice:

    Muchas gracias por tu información, me servirá mucho.

  4. Nicol dice:

    Por favor me podrian pasar el codigo completo , la verdad no me funciona…

  5. juan dice:

    tengo una pagina jimdo puedo colocarle este zoomy a la galeria q viene con jimdo

  6. Guille dice:

    Me gustaría saber como añadir este plugin a una página web magento, es posible?

  7. carolina dice:

    Buenas Tardes,

    Esta genial el ejemplo, sin embargo al implementarlo en varias imagenes no logro que funcione, me puedes decir que falta????

    Saludos.

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre