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.
<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <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.
<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:
<a href="image-1.jpg" rel="lightbox[roadtrip]">image #1</a> <a href="image-2.jpg" rel="lightbox[roadtrip]">image #2</a> <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.
Comentarios Total 53 comentarios
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
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
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.