S3Slider, bonito slideshow para presentar tus imágenes

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.    <script type=”text/javascript” src=”js/jquery.js”></script>
2.    <script type=”text/javascript” src=”js/s3Slider.js”></script>
3.    <script type=”text/javascript”>
4.        $(document).ready(function() {
5.            $(’#slider’).s3Slider({
6.                timeOut: 3000
7.            });
8.        });
9.    </script>


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.    <div id="slider">
2.            <ul id=”sliderContent”>
3.                <li class=”sliderImage”>
4.                    <img src=”images/410/3.jpg” alt=”3″ />
5.                    <span class=”bottom”><strong>Title text 2</strong><br />Content text…</span>
6.                </li>
7.                <div class=”clear sliderImage”></div>
8.            </ul>
9.        </div>

Fuente: Xyberneticos