Si te encuentras en la búsqueda de alguna bonita forma para presentar las fotografías de tu sitio web, te resultará conveniente tener en cuenta al elegante y atractivo slideshow que nos ofrece el s3Slider.

S3Slider es un interesante script escrito en jQuery que nos ayudará a presentar nuestras imágenes de una forma muy agradable, con efectos muy originales e interesantes, permitiéndonos además añadir fragmentos de textos que acompañen las fotografías.
Su implementación es muy sencilla, tan solo descarga el script desde aquí.

Aloja los archivos en tu servidor y haz el llamado correspondiente a los mismos en el head de tu sitio, de la siguiente manera:

JavaScript:

1. < type="”text/" src="”js/">
2. < type="”text/" src="”js/">
3. < type="”text/">
4. $( document). ready( function() {
5. $ ( ’#slider’). s3Slider({
6. timeOut: 3000
7. });
8. });
9.

El css sería algo así:

1. #slider {
2. width: 410px; /* important to be same as image width */
3. height: 300px; /* important to be same as image height */
4. position: relative; /* important */
5. overflow: hidden; /* important */
6. }
7. #sliderContent {
8. width: 410px; /* important to be same as image width or wider */
9. position: absolute;
10. top: 0;
11. margin-left: 0;
12. }
13. .sliderImage {
14. float: left;
15. position: relative;
16. display: none;
17. }
18. .sliderImage span {
19. position: absolute;
20. font: 10px/15px Arial, Helvetica, sans-serif;
21. padding: 10px 13px;
22. width: 384px;
23. background-color: #000;
24. filter: alpha(opacity=70);
25. -moz-opacity: 0.7;
26. -khtml-opacity: 0.7;
27. opacity: 0.7;
28. color: #fff;
29. display: none;
30. }
31. .clear {
32. clear: both;
33. }
34. .sliderImage span strong {
35. font-size: 14px;
36. }
37. .top {
38. top: 0;
39. left: 0;
40. }
41. .bottom {
42. bottom: 0;
43. left: 0;
44. }

Y finalmente, la estructura del sitio sería la siguiente:

HTML:

1. < id=" slider">
2. < id="”">
3. < class="”">
4. < src="”" alt="”3″">
5. < class="”">Title text 2< / strong> Content text…< / span >
6. < / li >
7. < class="”">
8. < / u l >
9. < / div >