August 30 2007
Lightbox en un plis - plas
Lightbox es una herramienta increÃble, te ahorra mucho tiempo en la creación de galerÃas de fotos, además, es altamente personalizable y es 2.0 (lo que la hace más C00L). Asà que, aquà les va una guÃa rápida de instalación y uso de Lightbox en un plis - plas
- Primero hay que descargarla
- Descomprimir su contenido dentro de la raíz de nuestro proyecto, tendremos una carpeta con el nombre de la versión actual, yo la he dejado en lightbox para los cuates.
- Luego, dentro del < head > < / head > del archivo donde vamos a colocar la galerÃa, debemos colocar lo siguiente:
JavaScript:
-
<script type="text/javascript" src="lightbox/js/prototype.js"></script>
-
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects"></script>
-
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>
Que son los archivos Javascript necesarios, Lightbox utiliza protoype y scriptaculous, asà que esas referencias son más que obligatorias. Ahora, colocamos el css necesario
CSS:-
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
-
- Ahora, para colocar un enlace a una imagen con Lightbox, solo hay que hacer lo siguiente:
HTML:
-
<a href="imagen.jpg" rel="lightbox" title="Titulo">Imagen</a>
-
- Para colocar, una imagen con Lightbox, cambia un poco:
- Finalmente, para colocar un grupo de varias imágenes con Lightbox será necesario ponesles un identificador como grupo, por ejemplo:
HTML:
Siendo galerÃa el identificador de grupo.

Y eso es todo, para los despistados, la referencia a una imagen JPG fue solo para efectos de ejemplificar, se puede usar cualquier tipo de imagen adecuada para medios web.
Aclaración: Si, ya se que hay un plugin para wordpress, pero Lightbox no es solo para usarlo ahÃ.





