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
Autor
¿Buscas trabajo de programador?
19 respuestas a “Zoomy – Ampliar imagen con efecto lupa”
Deja una respuesta
58 artículos que te podrían interesar
Muy buenas noches Jose deseando que te encuentres bien mira que necesito ese efecto lupa aplicarlo en angular version 8 me podrias indicar como hacerlo gracias
Hola Felix,
Lamento decir que no sabría decirte como se podría usar esta lupa en Angular.
Quizá puedes incorporarlo a tu página agregando también jQuery que es requerido para usar este plugin Zoomy.
Saludos
Saludos
Alguien sabe por que me aparece este error?
«Uncaught SyntaxError: Invalid or unexpected token»
O a alguien mas le apareció ese error?
Para los que no les da resultado, inserten la dirección completa en vuestra página, tanto del css como del js.
Buenas Tardes,
Esta genial el ejemplo, sin embargo al implementarlo en varias imagenes no logro que funcione, me puedes decir que falta????
Saludos.
Hola buenas tardes,
No lo hemos implementado con varias imágenes. Nos podrías pasar el enlace para verlo?
Saludos
Hola, ya también estoy intentando implementarlo en una página en varias imágenes y no soy capaz de sacarlo, te agradecería mucho si pudieras ayudarme. Un saludo!
Hola que tal,
Para este tipo de ayudas que requieren más de una hora de trabajo lo que podemos hacer es que nos envíes un correo a blog@jose-aguilar.com con todos los detalles para que revisemos como podemos proceder.
Saludos
Me gustaría saber como añadir este plugin a una página web magento, es posible?
Seguramente, es cuestión de añadir el plugin en la cabecera y su llamada y los tags html donde toque.
tengo una pagina jimdo puedo colocarle este zoomy a la galeria q viene con jimdo
Por favor me podrian pasar el codigo completo , la verdad no me funciona…
Del ejemplo en funcionamiento puedes descargar los archivos viendo el código fuente. Veo que la página oficial del plugin ya no funciona.
Hola. trato de usar esto y no me funciona, INCLUSIVE SI DESCARGO LOS ARCHIVOS, O SI USO LOS LINKS DE TU EJEMPLO:
Hola, revisa la versión del jQuery que estés utilizando, no vaya a ser que no sea compatible con el plugin zoomy
Muchas gracias por tu información, me servirá mucho.
Hola Como puedo ponerle zoom aun imagen que esta en un <MAP y solo ponerle en un lugar especifico el zoom
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!
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,