Lightbox: Imagenes Emergentes

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.

lightbox.gif

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.

  1. <script type="text/javascript" src="js/prototype.js"></script>
  2. <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
  3. <script type="text/javascript" src="js/lightbox.js"></script>

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.

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

  1. <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:

  1. <a href="image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
  2. <a href="image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
  3. <a href="image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

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.

lightbox-demo.jpg

Posts Relacionados

Comentarios Total 32 comentarios


Valeck
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

Sin nombre
Publicado: 14/09/2007 1:04 am

Gracias a tu info he terminado de exprimirle el jugo a este programa.

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


[...] Tutorial traducido de lightbox 2.0. [...]

crazydesigner
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

Jose Pastor
Publicado: 23/10/2007 7:22 pm

Me gustaría hacer el mismo efecto que Lightbox pero con archivo flv.

Saben como hacerlo?

crazydesigner
Publicado: 24/10/2007 5:32 pm

en flash o en javascript???

fredy
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

Maximiliano
Publicado: 26/12/2007 9:18 am

como se puede hace para que aparezca la pestañita de antertior y sigueinte?

Har1m
Publicado: 08/05/2008 1:28 pm

Quisiera saber si se puede añadir algun .swf? el lugar de un .jpg?
Muchas Gracias….

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

Leandro
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

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

Christian Portuguez Cuzque
Publicado: 29/07/2008 6:48 pm

Muy Fàcil….gracias UNIJIMPE !!

Saludos desde Perú =)

diego
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

kata_kat
Publicado: 20/10/2008 3:24 pm

gracias por la info me fue muy útil. Mi proyecto será el mejor gracias a lightbox jaja

Efecto Lightbox con CSS » unijimpe
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 [...]

César
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)

maria
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?

bescale
Publicado: 04/03/2009 12:33 pm

no funciona con acentos o caracteres especiales.

Alguien tiene una solucion?

merio
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?

obelich
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 ^_^

Vero
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!

anna
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”?

omar lopez
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.?

EriDaiho
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

delta
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

xosel
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

andrea
Publicado: 27/07/2009 10:14 am

Hola quisiera saber si es posible que el ligthbox funcione en un archivo asp

Matias
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!

Carolina
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!

kris
Publicado: 22/01/2010 1:31 pm

hola como estan, es un buen aporte el que nos ofrecen, voy a ponerlo en practica, gracias

 

Comentar

En este blog los comentarios están moderados, no aparecerán inmediatamente en la página al ser enviados. Por favor, evita los comentarios ofensivos u obscenos por que no serán aprobados.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)