Thickbox: otra manera de evitar popups

1 COMENTARIO - Publicado hace 47 meses - Clasificado en: LIGHTBOX, AJAX, MODALES

ThickBox es una pequeña variación de Lightbox JS, que permite mostrar tanto imágenes como html. Lo cierto es que es bastante fácil de utilizar, usando simplemente 'href', 'src', y 'title' para los popups. En vez de emplear Prototype, que es bastante pesado, se usa JQuery que es mucho más ligero (sobre los 20 K). Thickbox permite mostrar jpg, .jpeg, .gif, .png, .htm y.html. Se puede ver un ejemplo de funcionamiento en esta página.

Puesto que, quizá el post en inglés, sea un poco complicado de seguir y que, en mi opinión, la explicación de su uso está algo enrevesada, he decidido hacer una pequeña guia para su uso, con un ejemplo.

Lo primero que debemos hacer es descargar JQuery. Lo podemos hacer, en formato comprimido, desde esta url:
http://jquery.com/src/latest.js
Ahora debemos hacer lo mismo con ThickBox y con el CSS.
http://www.codylindley.com/blogstuff/js/thickbox/js/thickbox.js
http://www.codylindley.com/blogstuff/js/thickbox/css/global.css
Deberemos personalizar thickbox.jss para que enlace correctamente al gif animado de precarga que deseemos utilizar (aunque también podemos optar por prescindir de él); y para cambiar el literal "close" de la ventana.
Necesitamos dos imágenes, una que haga de thumbnail y otra la que queremos mostrar. En mi ejemplo son:
"Globos.jpg" y "Globosthumb.jpg"

Para hacer la llamada, podemos hacerlo tanto a una imagen

<a href="linkAImagen" title="Titulo de la imagen" class="thickbox"><img src="linkAImagenThumbnail" alt="Imagen" /></a>

como a un html

<a href="linkAHtmlFile?height=tamañoAlto&width=tamañoAncho" title="Titulo de la imagen" class="thickbox">Link Texto o Imagen</a>

Un ejemplo de uso sería:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="thickbox.css" rel="stylesheet" type="text/css">
<title>ThickBox</title>
<script src="latest.js" type="text/javascript"></script>
<script src="thickbox.js" type="text/javascript"></script>
</head>
<body>
<a href="globos.jpg" title="Una foto con Globos" class="thickbox">
<img src="Globosthumb.jpg" alt="Image" /></a>
</body>
</html>

Algunas entradas relacionadas: