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.

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

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

HTML4
  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:

HTML4
  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

Comentarios Total 53 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

Edward Alfonso
Publicado: 28/04/2010 9:59 pm

HOLA, MUCHAS GRACIAS; AL FIN ENTENDI¡¡¡¡¡¡
Lo que e querido, es colocar un swf en vez de una foto, pero no me sale¡¡

es posible?

Gracias y saludos a todos

Edward Alfonso
Publicado: 17/05/2010 1:43 pm

es posible insertar un swf??

Sabrina
Publicado: 07/06/2010 11:54 am

hola, coloque el lightbox en mi página, anda perfecto, el problema es que la imágenes están en un frame y el lightbox se abre dentro de este, y no en toda la pagina… Alguna solución?

Erik
Publicado: 23/08/2010 4:14 am

Muchisimas graciass.. me sirvió muchisimo :D

Nicolas
Publicado: 07/09/2010 3:27 pm

Estimados quisiera saber si puedo lanzar LightBox desde flash pero dentro del swf , que no se habra una ventana html.
espero sus comentarios
saludos!

juan
Publicado: 21/09/2010 9:32 am

hubiera sido bueno que incluyas un ejemplo funcional del lightbox en esta misma página ;)

juan
Publicado: 21/09/2010 9:36 am

@Nicolas
http://www.huddletogether.com/projects/lightbox/
“Flashlightbox – allows you to call the script from within a Flash file”

Ariani
Publicado: 10/11/2010 3:07 pm

Ayuda!!!! puedo hacer q funcione en mis articulos pero no en la pag principal :S

Ricardo
Publicado: 08/02/2011 5:57 pm

soy nuevo en esto del diseño web y necesito usar este codigo en mi web, cuando descargo el archivo winrar, que archivos tengo q subir de los que se encuentran hay ¿todos? luego de eso, en donde inserto los 3 scripts, ¿en la base de mi estilo css??? y el otro codigo, tambien va en la base css??? no entiendo, que alguien me explique porfa!!!!!

Daniel
Publicado: 10/02/2011 11:12 am

Muy buen aporte, soy estudiante de diseño publicitario y esto me va a servir para la web que debo desarrolar de proyecto final

Patrick
Publicado: 24/04/2011 2:32 pm

si quiero que en el footer del laghtbox aparesca el nombre de la imagen que esta en una fila SQL como lo haria?

Martin Fallas
Publicado: 18/06/2011 6:29 pm

Demasiadas gracias por este aporte! Todo funciona excelente! Lo unico con lo que estoy batallando en este momento es con localizar la imagen de “close”, pero es porque no se usar javascript jeje

rob
Publicado: 21/07/2011 10:19 am

esta exelente el aporte de slide

omar G
Publicado: 03/02/2012 11:25 am

mira yo utilce esta funcionalidad pero no me funciona al publicar en mi servidor ftp y solo me sirve de forma local. algiuien podria decirme el por que?

Grupo Milau
Publicado: 21/02/2012 12:18 am

Esta muy bien, aunque claro que no deja de ser algo sencillo. En la mayoria de webs es suficiente colocar algo asi.
Gracias!!

Pepe
Publicado: 09/11/2012 1:38 pm

Esto es una pendeja, no funciona ni explican como hacerlo bien, pongo el codigo y no sale ni un carajo, deberias decir como acoplarlo a las imagenes we…

jeffrson
Publicado: 06/12/2012 4:04 am

Hola, tengo una pregunta.
como puedo hacer para que una vez abierta una imagen mediante la ventana emergente, halla un texto o un link donde al darle “click” puedan ir a otra ventana o otra pagina como tal.?
Gracias, excelente tutorial

maria
Publicado: 09/02/2013 4:40 pm

yo tambien me hago la misma pregunta que jeffrson existe la posibilidad de que una vez abierta una imagen mediante la ventana emergente, halla un texto o un link donde al darle “click” puedan ir a otra ventana o otra pagina como tal.?

Diseño Web Economico
Publicado: 08/05/2013 11:05 am

Es bueno encontrar este tipo de objetos para gente que no tiene demasiado conocimiento, yo lo recomiendo a los que esten empezando. Siempre es mejor algo asi que flash o similar, por el tema de las posiciones en Google
un saludo amigos

Cecilia
Publicado: 01/10/2013 11:47 am

Hola, Muy bueno este post, aunque todavia no probé incertar la aplicacion en mi wp. Querria saber si se puede cambiar algo en el codigo para que cada ventana que se abra muestre las imagenes de ESE GRUPO DE IMAGENES UNICAMENTE y no que repita las imágenes que pueden visualizarse en la pagina como se ve en el ejemplo). Gracias y saludos

dsdisenoweb
Publicado: 22/12/2013 4:09 pm

Por alli handa una version que muestra ademas de la fotos la caja de comentarios de facebook, la vi hace algunos dias, en codecayon hay un plugin que vale $15 dolares creo pero sabiendo que esta la version libre que hace lo mismo no le veo caso, el unico problema es que debe ser bastante pesada auqneu seria de instalar ya que es simplemente agregar la caja de facebook y ya.

Saludos.

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

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