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
Sábado, 22 de Mayo de 2010 a las 07.44
muchas gracias, intentaré probarlo a ver si me funciona…
Miércoles, 7 de Julio de 2010 a las 16.52
Es genial, funciona de 10, lo adapte, si te gusta el ejemplo mira: http://www.furiusao.com.ar/imagenes
Jueves, 8 de Julio de 2010 a las 19.15
y que donde pongo ese codigo o que, no se ni por donde comenzar aunque se ve interesante le falta algo mas de info.
Martes, 9 de Noviembre de 2010 a las 19.31
jose Carlos Flores…. si no sabes ni por donde empezar estas grave….. gracias por el slideshow!!!!
Jueves, 3 de Febrero de 2011 a las 01.54
ooooh totalmente gracias!!! e buscado algo asi y primera vez que lo encuentro. gracias me salvaron la vida!
Lunes, 21 de Febrero de 2011 a las 15.12
Excelente aporte, era lo que buscaba, gracias a kienes como tu se toman el tiempo de mostrarnos ejemplos que son realmente funcionales…
gracias
Jueves, 17 de Marzo de 2011 a las 04.48
Aun no logro integrarlo en mi web :s osea, no encuentro algun tutorial que me sirba HELP!
Jueves, 24 de Marzo de 2011 a las 17.07
Muy buen aporte, muchisimas gracias, queria hacer algo asi en flash pero esto me gusta mas.
Martes, 3 de Mayo de 2011 a las 23.41
Anda lento en Firefox (tengo la v4.0.1)… la transicion de imagenes es super lenta.. (en ie da bien).
Domingo, 28 de Agosto de 2011 a las 14.59
Gracias por la guia, ya lo modifique personalizandolo de acuerdo a mi sitio web, lo unico que no pude hacer fue que me aparecieran las flechas de los slides tanto thmbnails como de las imagenes grandes…. no encuentro donde van en el archivo index… o sera que debo modificar el de estilo u otro???
Sábado, 24 de Septiembre de 2011 a las 16.47
pipedelico por eso pregunta por k no sabe, en vez de criticar ayuda
Miércoles, 2 de Noviembre de 2011 a las 05.26
Excelente aporteeeeeee!!!