Zoom en imagenes con Javascript
Este es uno de de los mejores efectos que he visto a la hora de ampliar una imagen mediante javascript. No es sólo por el resultado que obtenemos, si no que la implementación es realmente simple, como a nosotros nos justa, mínimo esfuerzo, máximo rendimiento.
El script se llama FancyZoom y los pasos a realizar para ponerlo en nuestro sitio web son:
1. Bájate el paquete de FancyZoom de la web del autor de aquí.
2. Con tu cliente FTP sube a tu servidor las dos carpetas que hay en el zip al directorio raiz u otro (pero entonces ten encuenta cambiarlo en el código del siguiente punto).
3. Añade las dos siguientes lineas a la sección <head> de tu fichero html
<script src=”/js-global/FancyZoom.js” type=”text/javascript”>
</script>
<script src=”/js-global/FancyZoomHTML.js” type=”text/javascript”>
</script>
4. Añade onload=”setupZoom()” dentro del tag <body>
<body id=”elquesea” [...] onload=”setupZoom()”>
5. Y ya está el resto es automático, los enlaces a imágenes de tu página harán el zoom automático en la misma página.
<a href=”/image.jpg”><img src=”/image-thumbnail.jpg” /></a>
Basado en leemiblog
Ésto es un ejemplo. Puedes editarlo, usando tu información.
luisdo
15 May, 2009
¿Alguna página que lo use de ejemplo? ¡¿O me vas a hacer probarlo yo mismo?!
JoseM
15 May, 2009
Joe tío como nos ponemos En la misma web del autor hay un ejemplo. OJO, se ven perfectamente en IE y FF pero en FF se aún mejor
luisdo
16 May, 2009
Genial! Queda precioso!