Bien hoy os dejo un nuevo recurso, para saber como aplicar a nuestros proyectos html, el recurso de light box.

Para los que no sabeis lo que es este recurso, os dejo el siguiente link, para que lo veaís en acción.

Alquiler de Naves Industriales Nerja

Bien lo primero que debeis de hacer es descargaros el recurso lightbox que podeís encontrar aqui

Una vez descargado y descomprimido prepararemos un par de cositas:

La primera de ellas será un documento html, a parte de eso necesitaremos la miniatura que pondremos en ese html y despúes necesitaremos también esa misma imagen en formato normal.

Bien al descomprimir encontraremos 3 carpetas:
+ css
+ images
+ js

En la carpeta images, encontraremos las imagenes que se necesitan tanto las miniaturas, como las que se encuentran en escala 1:1. en esa carpeta encontraremos otras imagenes, como por ejemplo las de close, la del cargador, la del botón siguiente… etc..etc..
en la carpeta js, tendremos todos los comportamientos javascript , como por ejemplo que se adapte la ventana blanca al tamaño de la imagen en tamaño 1:1, etc..etc..

En la carpeta css, encontraremos los estilos que aplicaremos cada vez que se clickeé una miniatura (aquí estaran definidos por ejemplo el fondo en tono de gris que aparece)

¿COMO APLICARLO A MI PROYECTO?

Bien lo primero que tenemos que hacer será incluir en nuestro proyecto y a la misma altura de arbol de archivos las carpetas css, images & js.
en el html llamaremos a los comportamientos javascript escribiendo lo siguiente en la cabecera de tu html, antes de </head>

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

a continuación incluiremos los estilos css:

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

Despúes en cada imagen añadiremos:

rel="lightbox"

quedando cada link hacia cada foto, de la siguiente manera:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

my caption, será el texto que querremos poner en la base de la imagen una vez que se ejecute el efecto lightbox.

La complejidad máxima de este recurso, está quizá en organizar bien las rutas de las imágenes. Es muy sencillo de poner en marcha. no obstante si teneís alguna otra duda, podeis ver el ejemplo que contiene el recurso.

RECURSO WEB OFRECIDO POR JUAN GARCIA DELICADO
sugerencias a webmaster@4cuarenta.com