ThickBox: Ventanas flotantes

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.

thickbox.gif

ThickBox, creado por Cody Lindley y que acaba de llegar a la versión 2.0 es sencilla de utilizar. Primero debes descargar los archivos necesarios para su funcionamiento:

  • 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.

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="thickbox.js"></script>
  3. <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:

  1. <a href=“flash9.gif” class=“thickbox” title=“Ejemplo ThickBox”>

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 Google.

  1. <a
    
  2. href="http://www.google.com?TB_iframe=true&height=420&width=600"
  3. title="Google"
  4. 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.

Etiquetas: , , , , ,

7 comentarios para “ThickBox: Ventanas flotantes”

  1. torpedo dice:

    Hola,

    ¿como puedo abrir una ventana usando thickbox automáticamente nada más entrar en el sitio web?, sin utilizar un hipervínculo, debe ser automático y sin necesidad de habilitar javascript?

    Gracias

  2. cristian dice:

    thickbox es na libreria javascript, si no tienes habilitado javascript no podras usarla. Así que no te queda mas remedio que maquetar un efecto similar al thickbox

  3. joan dice:

    Puedes pasarte por una entrada más antigua donde explicamos como lanzar automaticamente, pero con Multibox(http://blog.controlzeta.net/?p=371), pero para lanzarlo sin Javascript va a ser imposible.

  4. Javier dice:

    Hola,

    Tengo un problema con el thickbox en mi web, por ejemplo en este enlace: https://www.oltenwatch.com/product.php?productid=16544&cat=0&page=1

    Fijaros que el texto está todo junto, sin las tabulaciones y los espacios que debería tener para que quedase estéticamente bien.

    Si modifico el archivo thickbox_productpage.tpl en la línea @import “{$SkinDir}/thickbox/files/thickbox.css”;
    y quito lo de @import se corrige el problema pero ya no se me abren las fotos en una nueva ventana…

    Entiendo poco de programación, estaría muy agradecido si alguien pudiese ayudarme.

    Un saludo.

  5. lamomia_bmx dice:

    disculpen alguien me puede ayudar es q descarge los archivos coloque el codigo asi en una de prueba pero ahora em sale al dar click en el enlace me sale Type Error ‘imgLoader’ is undefined Y no se porq no he movido nada ni modificado.. alguien me ayuda please

  6. Daniel Fontanini dice:

    Eh puesto el Thickbox y me ha gustado los resultados lo interesante es que tengo una pagina web en donde aplique el codigo y me pasa toda la pagina hacia el lado izquierdo, me di cuenta que funciona bien en Internet Explorer 8,
    pero no funciona en Mozilla ni Google Chrome

    El problema parece ser aqui.

    Algo en el .CSS no esta configurado para visualizar en Mozilla ni Google Chrome algun sugerencia?

  7. Angel Luis Ponce dice:

    Lei entre los comentarios que tenian 2 dudas la primera que me parecio un poco complicada de resolver al momento, pero despues de unos minutos checando codigo me di cuenta que es facil ¿Como hacer que se abra una venta al entrar al website?
    La solución es agregar en la etiqueta body lo siguiente:
    onload=”TB_show(’prueba’, ‘http://mildescargas.freeiz.com?TB_iframe=true&height=420&width=600′)”

    ====================================

    El otro detalle que tiene Iamomia_bmx que le marca Type Error ‘imgLoader’ is undefined, aqui la solución es modificar el archivo thickbox.js, buscar la linea 38 que contiene esto:

    $(”body”).append(”");

    Sustituye “+imgLoader+” con todo y las comillas por el nombre de la imagen de carga, en este ejemplo utilizan una imagen llamada loading.gif, espero les sirva estas 2 soluciones a alguien mas.

Deja un comentario

CAPTCHA Image Audio Version
Reload Image