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

3 comentarios en “Zoom en imagenes con Javascript

Deja un comentario