LIGHTBOX EN PROYECTOS HTML
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
Hola Juan, observo que desde Explorer o Chrome este recurso te sigue funcionando, cosa que no me ocurre a mi, solo me funciona en Firefox. Veo tu código fuente para saber si añades algún código que facilite la vista a estos 2 exploradores, pero no veo nada peculiar.
¿Cómo lo haces? ¿Qué debo añadir?
hola tengo algunas dudas; si existen otros javascripts como por ejemplo los de un slider panel no se crearia un conflicto al añadir nuevo css y nuevo javascript. Como lo evito ?
– se debe repetir el proceso a cada una de las páginas de tu website ?
en tu ejemplo de la web de las chimeneas veo que no existen los botones de anterior y siguiente; era una version anterior de lightbox o algo así ?
De ante mano gracias por tus respuestas.
Un saludo.