javoaxian cambió a: javoaxian.me
Este blog se mantendrá como histórico del nuevo javoaxian.me. Por tal motivo, sólo serán creados post que harán referencia a los del nuevo blog. Si hay dudas y comentarios, favor de hacerlos en javoaxian.me.

sábado, 10 de mayo de 2008

Fancy Zoom: Lightbox en JavaScript para nuestras aplicaciones Web


Fancy Zoom es una muy buena herramienta la cual te permite hacer zoom de las imágenes que se encuentran en nuestro sitio.

Este software es cuenta con licencia totalmente libre para uso no comercial y tiene un costo de $39 USD por sitio (un único pago). Trabaja con los formatos de imágenes jpg, gif, png, bmp o tiff.

Para instalarlo y usarlo es muy sencillo, bastará seguir los siguientes pasos:

  1. Descargar FancyZoom desde aquí (la versión vigente es la 1.1).
  2. Descomprimir el archivo FancyZoom 1.1.zip:
    $ unzip FancyZoom\ 1.1.zip

  3. Transferir los archivos FancyZoom.js y FancyZoomHTML.js que se encuentran dentro del directorio que se creó FancyZoom 1.1 -> js-global en el servidor donde se encuentra el sitio al que le queremos poner el efecto.
  4. Agregaremos las siguientes líneas en las páginas donde deseamos usar la aplicación:
    <script src="http://urlsitio/ruta/FancyZoom.js" type="text/javascript"></script>
    <script src="http://urlsitio/ruta/FancyZoomHTML.js" type="text/javascript"></script>

  5. Se deberá agregar en el body de la página la instrucción onload="setupZoom();". Por ejemplo:
    <body onload="setupZoom();">

  6. Listo, a quedado instalada la aplicación, ahora para poder usarla deberemos poner la imagen pequeña mostrada en nuestra página en el tag <img< y la imagen grande en un <a href> que abarca el tag <img>. Por ejemplo:
    <a href="imagenGrande.jpg"><img src="imagen_chica.jpg" /></a>
Presiona sobre la imagen de Tux para ver un ejemplo.

Para quienes desean saber más de FancyZoom dejo aquí el sitio de esta aplicación.

2 comentarios:

Nikite dijo...

Que tal, gracias por la info, pero ahora que apenas estoy empezando mi blog, me gustaría saber como quitaste el botón de cerrar, y como hiciste para no tener que cargar las imágenes que vienen o que llama cuando tratas de abrir una imagen, ojalá puedas responder...
Nos vemos...

javoaxian dijo...

Hola Nikite, la verdad es que yo no le desactivé nada, quizá sea problema entre la versiones que usaste y la que yo use y que en la que tu estes usando hayan agregado esa funcionalidad.

Saludos!!!