Está en: Recursos web Javascript - Galería de imágenes

Galería de imágenes con Javascript:


En este tutorial instalaremos la galería de imágenes gratuita Lightbox desarrollada por Lokesh Dhakar. Esta galería presenta las imagenes utilizando todo el potencial de javascript.
Primero descargamos del site del creador los archivos necesarios para añadir la galería en nuestro sitio web:

Descargar galería
(descargamos de Download Lightbox v.2)
La descarga incluye los archivos .js necesarios, los css, imágenes y documentación.

Mostramos como funciona la galería (vamos a clickar sobre la imagen):



La instalación es sencilla:

Descomprimimos el archivo lightbox.zip y copiamos las carpetas "images", "js" y "css" en el root de nuestro sitio web. Si ya existen estas carpertas pues copiamos los archivos que contienen en ellas.

A continuación enlazamos tanto los archivos .js como los estilos css a nuestro documento hmtl:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

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


Atentos a la ruta del archivo html donde ejecutamos la galería.

Después preparamos las imágenes, las imagénes en miniatura deben llamarse thumb-1, thumb-2, thumb-3, etc. y las imágenes ampliadas image-1, image-2, image-3, etc. Y todas ellas deben estar en la carpeta "images" que nos proporcionó el archivo lightbox.zip.

Finalmente debemos enlazar las imágenes de la siguiente forma:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]" title="Imagen 1"><img src="images/thumb-1.jpg" width="100" height="80" border="1"></a>

<a href="images/image-2.jpg" rel="lightbox[roadtrip]" title="Imagen 2"><img src="images/thumb-2.jpg" width="100" height="80" border="1"></a>

<a href="images/image-3.jpg" rel="lightbox[roadtrip]" title="Imagen 3"><img src="images/thumb-3.jpg" width="100" height="80" border="1"></a><br>


Si queremos personalizar los elementos de la galería, podemos cambiar las imágenes close, next, loading, etc. de la carpeta images.

Inicio / Servicios Web / Recursos Web / Portfolio / Enlaces / Contacto / Sitemap / Aviso Legal

Hu Creative Web Site - info@hucreative.com
www.hucreative.com