Lightbox es un script hecho en javascript para mostrar imágenes de una manera muy cómoda y con excelente acabado. Adiós a los popups para mostrar imágenes grandes, este script mostrará tu imagen encima de toda tu web y con opciones para anterior y siguiente si es que tienes mas imágenes.

Para utilizar Lightbox lo primero es descargar la versión actual. Lightbox utiliza las librerias Prototype y Scriptaculous. Entonces necesitas incluir estar librerías en el head de tu html.
El siguiente paso es incluir la hoja de estilos para que Lightbox tenga la apariencia deseada, para ello incluimos los estilos en el header del html que estamos creando.
-
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
El paso final para utilizar Lightbox es agregar la propiedad rel="lightbox" a los enlaces que deseamos que abran una ventana flotante con la imagen. La propiedad href indicará que imagen se abrirá, la propiedad title sera el titulo de la ventana.
-
<a href="imagen.jpg" rel="lightbox" title="Titulo">Imagen</a>
En este caso hemos colocado como enlace un texto, también podemos utilizar imágenes. Finalmente si deseamos mostrar un conjunto de imágenes debemos agregar un nombre de grupo entre corchetes [], entonces nuestro código quedaría de la forma:
Entonces resumiendo, incluyes las librerías necesarias, la hoja de estilos y finalmente agregas la propiedad rel="lightbox", eso es suficiente para mostrar tus imágenes de un forma muy elegante y no intrusiva para tus usuarios.

Posts Relacionados
Comentarios Total 32 comentarios
Publicado: 07/08/2007 8:53 pm
Ps que te digo soy un estudiante de diseño y desarrollo web en proceso y te se decir que es un gran aporte me servira de mucho. gracias!!!!
DOMINUS VOBISCUM
Publicado: 14/09/2007 1:04 am
Gracias a tu info he terminado de exprimirle el jugo a este programa.
Publicado: 09/10/2007 8:01 pm
Bueno soy estudiante de diseño y solo te agradezco por esta información me servirá de mucho.
Publicado: 16/10/2007 12:02 pm
[...] Tutorial traducido de lightbox 2.0. [...]
Publicado: 22/10/2007 10:02 pm
Ufff buena info tio… yo me estoy volviendo loco queriendo hacer un slide como el de la pagina web de gucci, y ni idea… agradeceria un poco de info si podeis aportarme…si no desistire y lo haré de esta manera que tambien queda bien.
Merci
Publicado: 23/10/2007 7:22 pm
Me gustaría hacer el mismo efecto que Lightbox pero con archivo flv.
Saben como hacerlo?
Publicado: 24/10/2007 5:32 pm
en flash o en javascript???
Publicado: 29/11/2007 5:39 pm
tengo un problema yo cargo el contenido dinamicamente con ajax y cuando intento utilizar el link se abre una pagina nueva con la foto alguien sabe como putas solucionarlo
Publicado: 26/12/2007 9:18 am
como se puede hace para que aparezca la pestañita de antertior y sigueinte?
Publicado: 08/05/2008 1:28 pm
Quisiera saber si se puede añadir algun .swf? el lugar de un .jpg?
Muchas Gracias….
Publicado: 08/07/2008 10:14 am
Pues yo he seguido todos los pasos y no me funciona, lo he repetido varias veces al detalle pero nada de nada.
Publicado: 11/07/2008 8:01 pm
hola como estan, es genial la aplicacion pero la unica duda que tengo es como se hace para que en un slide (corchetes) me tome la que abro y no arranque siempre desde la primera… hay que indicar en algun lado el numero de orden?? muchas gracias
Publicado: 22/07/2008 1:36 am
genial, al principio no quedaba porque hay que ah¡gregar todos los css, pero en 20 min ya estaba listo… muy facil, Para quien pregunto lo de las imagenes, las referencias estan el el css y otras en el js en la parte de configuracion, es cosa de cambiar la ruta y listo ..
Publicado: 29/07/2008 6:48 pm
Muy Fàcil….gracias UNIJIMPE !!
Saludos desde Perú =)
Publicado: 11/08/2008 11:10 am
yo soy novato en el web, me gustaria poder agregar el lightboz para presentar las fotos en mi Blog de blogger. Alguien sabe como puedo incluir el css de lightbox?
supongo que por ser un blog debe ser mas complicado ya que no puedo cargar en un directorio el css de lightbox… bueno una ayuda pls, gracias
Publicado: 20/10/2008 3:24 pm
gracias por la info me fue muy útil. Mi proyecto será el mejor gracias a lightbox jaja
Publicado: 23/10/2008 1:17 am
[...] es un script muy popular del cual hemos comentado en Lightbox: imágenes Emergentes que permite mostrar imágenes y contenido en ventanas que se superponen sobre todo el web. Este [...]
Publicado: 20/11/2008 2:36 pm
Me funciona perfecto con firefox y safari, pero cuando pruebo en internet explorer y opera, me abre la imagen en una ventana nueva… Alguien sabe como corregir esto? (estoy a punto de cortarme las venas)
Publicado: 26/12/2008 2:35 pm
hola,
estoy desarrollando lightbox para una web pero tengo la duda de si el contenido incluido en el lightbox se indexa o no en google? espero que si porque si no en los rankings siempre quedaría muy bajo ¿no?
Publicado: 04/03/2009 12:33 pm
no funciona con acentos o caracteres especiales.
Alguien tiene una solucion?
Publicado: 13/04/2009 7:05 pm
tengo un problema.. lo estoy poniendo dentro de un iframe por ciertas cuestiones del maquetado de la web.. pero no me funciona cargandolo en la web completa..El decir.
Mi web tiene un iframe, y dentro de ese iframe se encuentran las fotos que cargan con el lightbox, el codigo esta puesto sobre el archivo princiapal..el que contiene el iframe, pero es como que no recibe la orden al venir desde un iframe.. alguien sabe por que?
Publicado: 17/04/2009 6:35 pm
Hola solo agradecer el que te esmeres en poner tantos tutoriales en tu pagina tienes una muy buena y extensa libreria graicas ^_^
Publicado: 23/04/2009 2:56 pm
excelente tutorial, pero no me funcionaba hasta que agregue esta palabra “builder”
despues funciona correctamente en Firefox e IE7
no se mucho de esto y leyendo os tutoriales me enamoro cada dia mas del diseño web :) otra vez excelente pagina
Saludos!
Publicado: 24/04/2009 6:06 am
Se puede poner titulo o nombre a las imàgenes agrupadas, para que en vez de “Image 1 of 6″ salga por ejemplo “Paisage: Montaña nevada”?
Publicado: 22/06/2009 1:34 pm
Genial el sistema de visualisacion de images.. pero tengo una duda… com olo hago para no tener que agregar los archivos del lightbox en cadsa directorio de donde tengas las fotos? como podria agregar el lightbox dentro de una hoja de stylos sin tener que agregar los archivos y solo hacer la llamada una vez.?
Publicado: 29/06/2009 10:23 pm
como uso las librerias? he subido todo lo que contenia en el zip en un hosting -__-….
no me funca pls ayuda o_o
Publicado: 01/07/2009 4:07 am
Hola…
¿hay alguna manera de personalizar mi lightbox?
Quiero decir: cambiar el diseño de las flechas, o por ejemplo que la imagen popup no sea justo eso, sino que forme parte del entorno de mi web.
Un saludo
Publicado: 18/07/2009 12:53 pm
no me queda claro lo de el grupo de imágenes… puedes explicarme mejor?? o decirme donde puedo leer sobre eso?? muchas gracias de antemano y muy buen post me saca de un gran apuro :D. Saludos
Publicado: 27/07/2009 10:14 am
Hola quisiera saber si es posible que el ligthbox funcione en un archivo asp
Publicado: 15/09/2009 9:53 pm
Buenas, tengo una duda que ya me esta quitando mucho tiempo. Yo tengo el nombre de la imagen guardado en la base de datos, como hago para ponerlo dinamicamente en el y en el ?? Gracias!
Publicado: 22/10/2009 3:04 pm
Hola, perdón mi ignorancia, pero no encuentro de dónde bajar las librerías necesarias y la hoja de estilos.
Gracias!
Publicado: 22/01/2010 1:31 pm
hola como estan, es un buen aporte el que nos ofrecen, voy a ponerlo en practica, gracias