SummArg | Cursos y recursos para webmasters

22/12/2008

Hermoso y sencillo javascript TinySlideShow

javascriptDesde leigeber.com siempre podemos ver material de calidad, en este caso nos trae una hermosa galería de imagenes con un slider para seleccionar la imagen deseada. Si no hay acción por parte del usuario, las imagenes correran solas, y tenemos disponible la opción de agregar un texto descriptivo.

Vean el demo de la galería para que no les queden dudas sobre lo que digo. Ahora veamos como se pone en marcha esto. El código lo descargan desde el site del autor en TinySlideShow 

Deben subir los dos archivos .js para que funcione, y tienen un ejemplo con imagenes cargadas en el zip para que puedan basarse en él.

<ul id="slideshow">
<li>
<h3>Image One</h3>
<span>photos/image-one.jpg
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/image-one.jpg" alt="Image One" /></a>
</li>
<li>
<h3>Image Two</h3>
<span>photos/image-two.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<img src="thumbnails/image-two.jpg" alt="Image Two" />
</li>
</ul>

El autor nos señala que cada li representa a una imagen, el h3 es el título de la imagen y p la descripción (el texto que aparece debajo). Con las etiquetas span indicamos la ruta a la imagen en tamaño completo. Finalmente en el site mencionado encontrarán los valores que pueden cambiar para modificar el modo en que se ven las imagenes (velocidad del show, transparencia, colores) desde el archivo javascript.

Es un complemento muy liviano para añadir a una web.

TinySlideShow

Dejar un comentario