ThickBox es una librería javascript que permite abrir ventanas flotantes sobre páginas HTML. Esto nos permitirá mostrar imágenes o paginas sobre una ventana emergente y sin necesidad de abrir una ventana nueva, evitando de esa forma también el Bloqueador de popup de nuestro navegador. Puedes ver un [TBOXI]ejemplo, /wp-content/uploads/2006/08/thickbox.gif, Ejemplo de ThickBox[/TBOXI].
- jquery.js: Librería necesaria para el funcionamiento e thickbox.
- thickbox.js: Funciones thickbox para abrir las ventanas.
- thickbox.css: Hoja de estilos para la ventana emergente.
- loader.gif: imagen que se mostrará mientras se carga el contenido de la ventana emergente
Entonces una vez que se tienen todos los archivos, lo siguiente es incluir las librerías, la hoja de estilos en nuestro HTML, esto se incluye antes de cerrar el tag HEAD.
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="thickbox.js"></script> <link rel="stylesheet" href="thickbox.css" type="text/css" />
Luego cuando se quiere insertar una pantalla flotante con una imagen, esto se hace sobre un enlace, por ejemplo si deseamos incluir un enlace para abrir una imagen:
<a href="flash9.gif" class="thickbox" title="Ejemplo ThickBox">
Podemos ver el [TBOXI]resultado, /wp-content/uploads/2006/06/flash9.gif, Ejemplo ThickBox[/TBOXI] del código anterior. Donde se tiene que class=»thickbox» es el que indica a las librerías thickbox que se abrirá una ventana emergente, el otro dato importante es que lo que se asigne a la propiedad title se mostrará como titulo de la ventana emergente. Resumiendo podemos decir que a cualquier enlace que tengamos en nuestra página solo es necesario aplicarlo el estilo thickbox.
Esto es para el caso de las imágenes, pero si deseamos incluir una página externa, el código cambio poco, donde tenemos que incluir el ancho y el alto de la ventana emergente en la url que se le pasará a la propiedad href, veamos el siguiente ejemplo donde abrimos la página de [TBOX]Google, http://www.google.com, Google, 600, 420[/TBOX].
<a href="http://www.google.com?TB_iframe=true&height=420&width=600" title="Google" class="thickbox">Google</a>
Se observa que el código adicional es ?TB_iframe=true&height=420&width=600, es obvio donde se pone el ancho y alto de la ventana.
Espero haber sido descriptivo con esta explicación y seguramente les va a servir mucho para las páginas webs que van a implementar.