s3Slider: slideshows basados en jQuery

Publicado por Nikko el dia 4 Dec 2008 - Guardado en 1,360 Views jQuery, Javascript, Scripts, Galerias 1,360 Views

¿Aun con ganas de testear más opciones para generar tus “slideshows”? Con s3Slider jQuery plugin tienes una opción mas para agregar a tu extensa lista, un script escrito en jQuery con opciones muy interesantes y efectos muy atractivos. Sin dejar de lado la opción de añadir fragmentos de texto que acompañen nuestras fotos.

Ver demos - descarga - Via webintenta - visual-blast.
Uso:
Descargar y alojar los archivos en nuestro servidor, luego realizar la llamada correspondiente desde nuestro “head”

PLAIN TEXT

JavaScript:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>

Un poco de estilo CSS - En este caso para el ejemplo N° 1

PLAIN TEXT

CSS:

#slider {
width: 410px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#sliderContent {
width: 410px; /* important to be same as image width or wider */
position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 384px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {
clear: both;
}
.sliderImage span strong {
font-size: 14px;
}
.top {
top: 0;
left: 0;
}
.bottom {
bottom: 0;
left: 0;
}

y por ultimo: Nuestra estructura

PLAIN TEXT

HTML:

<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<img src="images/410/3.jpg" alt="3" />
<span class="bottom"><strong>Title text 2</strong><br />Content text...</span>
</li>
<div class="clear sliderImage"></div>
</ul>
</div>

delicious, digg, barrapunto, meneame, digg , technorati , stumble it!

Bastian

4 - 12 - 2008


Esta muy buena
siempre reviso la web, y estoy interesado en este slideshows
el problema esque no logro que funcione en mi web :S
me pueden hechar una mano?

b13@dattahit.com
guss

4 - 12 - 2008


muy elegantes, y muy raros jeje..

estan buenos.. saludos!
Dario

4 - 12 - 2008


Exelente recurso, lo probare y gracias ando en vias de aprender un poco de jquery

saludos

Xyberneticos

s3Slider: slideshows basados en jQuery