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.

            About these ads

            8 comentarios »

            1. orpll said

              con esto me han salvado la vida,
              pero habra alguna forma de combinarlo con Flexigrid de Jquery.

              lo he intentado pero me habre otra ventana!

            2. pepe said

              NO se ve nada

            3. car said

              no vi nada yo tampoco!!
              saludos.

            4. oye y si quiero poner una url… donde tenga un formulario
              muy peluo??
              se puede ??
              como lo hago??
              ayuda me?

            5. jpenagos said

              parce una chimba me funciono muy bien, muy elegante. sin embargo en mozilla se pega la pagina . a que se debe eso ??

            6. Len said

              Hola, al implementarlo me aparece esto.

              ReferenceError: imgloader is not Define

            7. lgriosm said

              hay un error en esta parte del codigo
              “http://www.google.com?TB_iframe=true&height=420&width=600″
              no lo encuntra gogle pq es como referencia a dicha pagina y cuando se ejecute dice que gogle no lo encontro si solo se pone
              “http://www.google.com”
              automaticamente si abre el gogle pero en otra ventana completa.
              si alguien soluciona este error favor de avisarme

            8. alberto toro said

              Hola.
              Quisiera saber si se puede pasar parametros por metodos GET o POST a la nueva pagina tal vez utilizandfo ajax
              Gracias

            RSS feed for comments on this post · TrackBack URI

            Deja un comentario

            Introduce tus datos o haz clic en un icono para iniciar sesión:

            Logo de WordPress.com

            Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

            Imagen de Twitter

            Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

            Foto de Facebook

            Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

            Google+ photo

            Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

            Conectando a %s

            Seguir

            Recibe cada nueva publicación en tu buzón de correo electrónico.

            A %d blogueros les gusta esto: