Lightbox: Imagenes Emergentes
- 23/06/2007
- 11:42 am
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
- Webthumb: Web ScreenShots
- Screenshots de cualquier Web
- Tu Dominio en Blogger
- Crear PDF con Imagenes en PHP
- Editores HTML Web Online
Total de Comentarios: 15
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
Gracias a tu info he terminado de exprimirle el jugo a este programa.
Bueno soy estudiante de diseño y solo te agradezco por esta información me servirá de mucho.
[...] Tutorial traducido de lightbox 2.0. [...]
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
Me gustaría hacer el mismo efecto que Lightbox pero con archivo flv.
Saben como hacerlo?
en flash o en javascript???
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
como se puede hace para que aparezca la pestañita de antertior y sigueinte?
Quisiera saber si se puede añadir algun .swf? el lugar de un .jpg?
Muchas Gracias….
Pues yo he seguido todos los pasos y no me funciona, lo he repetido varias veces al detalle pero nada de nada.
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
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 ..
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
