IMAGENES EMERGENTES CON LIGHTBOX

IMAGENES EMERGENTES CON LIGHTBOX
Nada mejor para empezar que usar script para que nuestra web este mucho mas dinamica y mejor a la vista.

El siguiente tema es para ayudarnos a crear nuestra galeria de fotos sencilla sin esforsarnos.

LIGHTBOX es un script(javascript y css) para mostrar las imagenes de forma elegante y cencilla



Para utilizar Lightbox descarga el codigo de la pagina principal. Lightbox utiliza las librerias Prototype y Scriptaculous que son archivos javascript que sirven para dar funcionalidad a el efecto, incluyelas en el head.

HTML:

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>



Luego agrega el archivo css

HTML:

1.
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


El paso final 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.En este caso hemos colocado como enlace un texto, también podemos utilizar imágenes.

HTML:

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

Finalmente si deseamos mostrar un conjunto de imágenes debemos agregar un nombre de grupo entre corchetes []:
HTML:

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>



Listo con esto tienes tu galeria de fotos bien formada. no te pierdas nuestro siguientes temas de programacion
Para mas informacion enlace