Bonito Slideshow en JavaScript

Si necesitas alguna bonita y elegante forma de presentar las fotografías de tu sitio web puede que te resulte interesante el slideshow animado realizado en JavaScript que nos traen desde la web Leigeber.

El slideshow dinámico JavaScript es liviano y sencillo de implementar. El mismo ha sido probado y funciona correctamente en los navegadores: Firefox, Internet Explorer, Opera, Safari y Chrome.

Este es un ejemplo del margen para construir un slideshow:

<ul id="slideshow">
<li>
<h3>Image One</h3>
<span>photos/image-one.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>
<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>

Cada “li” representa una imagen. El contenido “h3″ se convierte en el titulo de la imagen y “p” la descripción de la misma. El contenido “span” es el camino a la imagen en tamaño completo.

Estos son los parámetros que podemos modificar del objeto. Los valores que vienen por defecto se muestran como (10) y los recomendados como [1-20].

Imágenes:
imgSpeed = int; (10)
navOpacity = int; (25)
navHover = int; (70)
letterbox = “string”; (#000) required color for letterbox on portrait images
link = “string”; class name for link hover state

Auto Slideshow:
auto = boolean; (false)
speed = int; (10)

Dialogo de información:
info = boolean; (true)
infoID = “string”; required for information dialog
infoSpeed = int; (10)

Deslizador Thumbnail:
thumbs = “string”; id of thumbnail slider, disabled if not set
scrollSpeed = int; [1-20] (5)
thumbOpacity = int; [0-100] (70)
active = “string”; required for thumbnail active border
spacing = int; (5) spacing between thumbnails
left = “string”; id of left navigation link, required for slider
right = “string”; id of right navigation link, required for slider
Haz clic aquí para descargar la fuente>> http://sandbox.leigeber.com/javascript-slideshow/TinySlideshow.zip

Fuente: Leigeber