Como usar Lightbox 2
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
1 2 3 |
<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> |
1 |
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> |
1 |
<a href="ruta/image-1.jpg" rel="lightbox" title="texto">imagen</a> |
rel="lightbo
x[grupo]
“. Por pruebas y algunos problemas que tuve, recomiendo colocar los elementos en un div con el mismo class (una buena sugerencia).
1 2 3 4 |
<div class="imagenes"><a href="photos/image_01.jpg" rel="lightbox[group]” title=”image title 01>first picture</a></div> <div class="imagenes"> <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> |
Etiquetas:galeria, javascript, lightbox, Programacion
"Trackback" Enlace desde tu web.
-
http://www.art-du-bureau.com/ Kouba