Como usar Lightbox 2

Escrito por smartadmin el octubre 21, 2009. Posteado en General, Javascript, Programacion

Lightbox es una liberia hecha en javascript que permite visualizar imagenes de una forma agradable (por asi decirlo), aunque tambien permite crear una galeria y facilitar la navegacion. Aqui les mostrare como podemos utilizar esta libreria facilmente. Lo primero que tenemos que hacer es descargar lightbox. Existen muchos proyectos parecidos y algunos con elementos adicionales, pero sabiendo como implementar uno podremos manejar cualquier otro. Al descargar los archivos tendremos el javascript, la hoja de estilos y las imagenes (que podemos cambiar a nuestro antojo) En nuestro proyecto agregamos estos elementos y configuramos nuestra pagina de la siguiente forma: 1. Agregamos la referencia a los archivos javascript del lightbox

&lt;script type="text/javascript" src="js/prototype.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/lightbox.js"&gt;&lt;/script&gt;

2. Agregamos la referencia del archivo de estilo

&lt;link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /&gt;

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

3. Para que se identique a que vinculo se le quiere agregar el lightbox la agregamos la etiqueta rel=”lightbox”.

&lt;a href="ruta/image-1.jpg" rel="lightbox" title="texto"&gt;imagen&lt;/a&gt;

1	<a href="ruta/image-1.jpg" rel="lightbox" title="texto">imagen</a>

4. Si se quiere crear una galeria (poder ver las imagenes en secuencia), la etiqueta va llevar el nombre del grupo rel="lightbox[grupo]“. Por pruebas y algunos problemas que tuve, recomiendo colocar los elementos en un div con el mismo class (una buena sugerencia).

&lt;div class="imagenes"&gt;&lt;a href="photos/image_01.jpg" rel="lightbox[group]” title=”image title 01&gt;first picture&lt;/a&gt;&lt;/div&gt;
&lt;div class="imagenes"&gt;
&lt;a href=”photos/image_02.jpg” rel=”lightbox[group]” title=”image title 02&gt;second picture&lt;/a&gt;&lt;/div&gt;
&lt;div class="imagenes"&gt; &lt;a href=”photos/image_03.jpg” rel=”lightbox[group]” title=”image title 03&gt;third picture&lt;/a&gt;&lt;/div&gt;

<div class="imagenes"><a href="photos/image_01.jpg" rel="lightbox[group]” title=”image title 01>first picture</a></div>

<a href=”photos/image_02.jpg” rel=”lightbox[group]” title=”image title 02>second picture</a></div>

<div class="imagenes"> <a href=”photos/image_03.jpg” rel=”lightbox[group]” title=”image title 03>third picture</a></div>

Ejemplo

Etiquetas:galeria, javascript, lightbox, Programacion

"Trackback" Enlace desde tu web.

http://www.art-du-bureau.com/ Kouba

Very interesting and amusing subject. I read with great pleasure.

L	M	X	J	V	S	D
« abr				nov »
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Usuario
Contraseña

	Recuerdar mis datos ¿Olvidó la contraseña?