|
 Bueno hace tiempo que no publico nada sobre Javascript, a pesar de la buena acogida que tuve el artículo sobre los calendarios en Javascript, pero acabo de ver esta librería para hacer un Zoom con efecto que me pareció muy bueno, así que aquí os lo comento para compartirlo con vosotros.
Esta librería, cuya web del autor para ampliar información y/o bajaros el fichero zip con ella es: http://www.cabel.name , nos permite mostrar fotos e imágenes en linea sin necesidad de cargar páginas web separadas, ni modificar html, ya que capturará cualquier enlace a una imágen en vuestra página y la sustituirá automáticamente con el zoom en la misma página en la web del autor podeis ver una demo de como funciona. A continuación os explico como instalarla y sus principales características. Las características de esta librería son las siguientes: - Esta orientada ha conseguir un efecto de zoom suave y muy bien acabado.
- Escala las imágenes automáticamente desde cualquier enlace, sin cambios en el HTML.
- Hace precarga de las imágenes a tamaño completo, de fondo, para el evento "mouseover".
- No usa recursos muy pesados y está programado desde cero.
- Muestra un efecto de sombra en la imagen mostrada a tamaño completo.
- Solo necesita incluir dos lineas de código en tu HTML.
- Chequeado y funcionando con Safari, Firefox, IE7, e IE6. (se ve mejor en navegadores modernos).
Y las instrucciones para instalarlo son muy fáciles: 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> Fácil ¿eh?
 |
RSS feed Comments
gracias!
