Marcofbb Noticias y Artículos Webmasters

Lightbox imágenes sobrepuesta

• 08/09/2010
• 1:07 am
• marcofbb

Lightbox es un script para mostrar imágenes sin abrir popups u otra ventana en el navegador, este script lo que hace es mostrar la imagen sobre tu web. Al darle click sobre la imagen automáticamente se pone todo el fondo negro trasparente y la imagen arriba.

Incluir los siguientes códigos 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,builder"></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" />

Y como ultimo paso agregarle rel=”lightbox” a los enlaces que deseamos que abran una ventana flotante con la imagen.
De la siguiente manera

<a href="imagen.jpg" rel="lightbox" title="Titulo">Imagen</a>

Acá utilizamos un enlace pero fácilmente se puede hacer con imágenes ya sea la original o miniaturas. Para mostrar un conjunto de imágenes debemos agregar un nombre de grupo entre corchetes [].
El código quedara así

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

Posts Relacionados