:::: MENU ::::

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.

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

lightbox-demo.jpg


53 Comentarios

  • dsdisenoweb |

    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.

Publica tu comentario

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