THICKBOX

ThickBox es una herramienta desarrollada mediante el lenguaje JavaScript que crea un interesante y elegante efecto a la hora de mostrar imágenes grandes que proceden de una imagen en miniatura. También es muy útil para galerías de fotos, o para mostrar otro tipo de contenidos. Si deseas usarlo, puedes descargarte de aquí un rar con todo lo necesario, la librería jQuery de JavaScript, el documento thickbox.js, su hoja de estilos necesaria y la imagen para la animación del "Loading". Para que funcione correctamente es necesario seguir los siguientes pasos.

1. Incluye las siguientes líneas de código que llaman al JavaScript en el HEAD:
   

   <script type="text/javascript"src="path-to-file/jquery.js"></script>
   <script type="text/javascript" src="path-to-file/thickbox.js"></script>

2. Es necesario cargar el CSS específico de Thick Box, para ello añade también:
   

   <link rel="stylesheet" href="thickbox.css" type="text/css" media="screen">



3. Busca en el archivo thickbox.js la siguiente línea:
   

   $("body").append("<div id='TB_load'><img src='images/loadingAnimation.gif' /></div>");

   
   en la que deberás especificar en la etiqueta

   <img src="ruta_imagen_/loadingAnimation.gif"

   la ruta en la que ubicarás la imagen de "loading".

A continuación puedes observar varios ejemplos:

Imagen en miniatura que carga una más grande:

Para conseguir este efecto al crear el enlace a la imagen grande deberemos indicar class="thickbox". A continuación el código HTML usado:

<a href="grande.jpg" title="Bonito paisaje" class="thickbox"><img src="peque.jpg" border="0" class="espacio_derecha"></a>

Galería de imágenes:

Para el ejemplo de las galerías de imágenes, el funcionamiento es el mismo que para solo una imagen de muestra, también debemos en cada enñace indicar la clase class="thickbox", pero además deberemos añadir a un "rel" a cada imagen que queramos que forme parte de la galería de fotos. Por ejemplo rel="galeria", como ves en el código HTML de abajo usado para el ejemplo:

<a href="grande.jpg" class="thickbox" rel="galeria"> <img src="peque.jpg"> </a>
<a href="2a.jpg" class="thickbox" rel="galeria"> <img src="2.jpg"> </a>
<a href="i3a.jpg" class="thickbox" rel="galeria"> <img src="3.jpg"> </a>

Se puede mostrar otro tipo de contenido con thickbox, como por ejemplo un iframe:

Simplemente observa el código HTMl de abajo, en el href simplemente deberás modificar lo que se encuentra antes de la interrogación "?" que es la página que se manda a cargar en el thickbox, y luego los atributos "width" y "height" para especificar el alto y el ancho. Si lo que va a ser cargado es más grande que las medidas especificadas, saldrán barras de scroll en el thickbox.

Pincha para ver el iframe con thickbox

<a href="iframe.htm?keepThis=true&TB_iframe=true&height=180&width=250" title="Título" class="thickbox">Pincha para ver el iframe con thickbox</a>

Para más información, y saber todo acerca de ThickBox visita la siguiente página web.