iBox

Ibox es una pequeña librería escrita en Javascript que nos va a permitir mostrar diverso contenido en nuestra web. La web del proyecto es http://www.enthropia.com/labs/ibox/ y desde allí mismo la podemos descargar siguiendo este enlace: http://www.ibegin.com/labs/ibox/download.php. ¿Por qué vamos a utilizar esta librería?, vamos a detallar las razones en los siguientes puntos:

• Nos permite visualizar imágenes de manera elegante.
• Podemos ocultar partes de nuestra página para luego resaltarlas.
• Mediante Ajax, podemos visualizar otras paginas como si de una imagen se tratara.
• Tiene un código liviano: 20k (no necesita framework)
• Es muy fácil de utilizar.

Para empezar a trabajar con este script, lo primero que debemos hacer es descargarlo desde su web y descomprimir el fichero. Nos encontraremos con varias carpetas y archivos, debemos incluir en nuestros trabajos el fichero ibox.js y la carpeta images.

<script type="text/javascript" src="ibox.js"></script>

Como hemos comentado anteriormente, iBox nos va a permitir realizar varias funciones diferentes dentro de una web, la primera que vamos a ver es la de mostrar el detalle de fotos e imágenes. Para poder ver una imagen resaltada al hacer click en un thumbnail no tenemos mas que poner este código sobre la imagen:

<a href="imagen1big.jpg" rel="ibox?height=500&width=500"
   title="500x426!" >
   <img src="imagen1.jpg" alt=""/>
</a>

En la sentencia se puede ver como ponemos el tamaño (width y height) de la imagen. Esto no es obligatorio y si no lo ponemos iBox se adaptará automáticamente. El resultado sería el siguiente:

Además del uso de iBox en la visualización de imágenes podemos hacer el mismo efecto con div ocultos. Estos divs contendrán el contenido oculto hasta que son llamados por la librería iBox. Si queremos asociar la llamada a un enlace escribiremos este código:

<a href="#divOculto" rel="ibox&height=500" title="Cargando un div" >
   abrir div oculto
</a>

Que hará referencia a un div oculto como este:

<div id="divOculto" style="display:none">contenido del div</div>

El resultado sería este:

Por ultimo, IBox, nos permite no solamente cargar divs, sino también otras paginas externas por Ajax. Hay que tener en cuenta que al tratarse de una carga por AJAX, no podemos cargar paginas que se encuentren fuera de nuestro servidor. Para asociar la llamada a una página externa desde un enlace escribiremos:

<a href="pruebaIbox.html"
   rel="ibox&height=400" title="pagina HTML" >
   ver pruebaIbox.html
</a>

Y la visualización será la siguiente: