s3Slider, otro carrusel de fotos en Blogger

S3Slider es otro carrusel (slide) para ver una serie de fotos con un texto.

El texto se adapta a los lados, con una descripción de cada foto o elemento. Aquí ya vimos otro carrusel.


Demo.


Estos son los pasos a seguir:

1. Bajamos los ficheros jquery.js y y s3slider.js y los alojamos en nuestro alojamiento habitual.

2. Antes de </head> ponemos:
<script src="TU_URL/jquery.js" type="text/javascript"></script>
<script src="TU_URL/s3Slider.js" type="text/javascript"></script>
3. Después de <body> ponemos:
<script type="text/javascript">
$(document).ready(function() {
$("#s3slider").s3Slider({
timeOut: 4000
});
});
</script>
En timeOut: 4000 modificamos el tiempo en milisegundos que tardarán en deslizarse las imágenes.

4. Ponemos lo siguiente donde queramos poner el Carrusel:
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="TU_URL_IMAGEN1" />
<span>TEXTO DE LA IMAGEN1</span>
</li>
<li class="s3sliderImage">
<img src="TU_URL_IMAGEN2" />
<span>TEXTO DE LA IMAGEN2</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>
En TU_URL_IMAGENX ponemos la dirección url de nuestras fotos.
En TEXTO DE LA IMAGENX ponemos el texto que describe cada foto.
Añadimos los bloques :

<li class=”s3sliderImage”>
<img src=”TU_URL_IMAGEN” />
<span>TEXTO DE LA IMAGEN</span>
</li>

que necesitemos.

5. Añadimos el css antes de ]]> :
#s3slider {
width: 400px;       /* mismo ancho  que las imágenes */
height: 300px;      /* misma altura que las imágenes */
position: relative; /* importante */
overflow: hidden;   /* importante */
}#s3sliderContent {
width: 400px;       /* mismo ancho que las imágenes */
position: absolute; /* importante */
top: 0;             /* importante */
margin-left: 0;     /* importante */
}
.s3sliderImage {
float: left;        /* importante */
position: relative; /* importante */
display: none;      /* importante */
}
.s3sliderImage span {
position: absolute; /* importante */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 374px;
background-color: #000;
filter: alpha(opacity=70); /* opacidad caja del texto */
-moz-opacity: 0.7;         /* opacidad caja del texto */
-khtml-opacity: 0.7;       /* opacidad caja del texto */
opacity: 0.7;              /* opacidad caja del texto */
color: #fff;
display: none;      /* importante */
top: 0;
/*
si ponemos top: 0;
la caja de texto estará en la parte superior
si ponemos bottom: 0;
la caja de texto estará en la parte inferior
*/
}
.clear2 {
clear: both;
}

Fácil.

6 comentarios:

Anónimo

no lo doy echo funcionar mi mail es Ass_itch77@hotmail.com ayudame
gracias

jesgo

issues77:
Si sigues las instrucciones que doy debería funcionar. Si tienes alguna duda en algún paso vuelve a comentarme.
Saludos.

Anónimo

no se lo que hago mal,hago todo lo q me dices,se ve el espacio,pero no salen las imagenes

jesgo

issues77, puede que tengas algún script instalado ya en tu plantilla que interfiera con s3slider.
He creado un blog de prueba en http://pruebas3slider.blogspot.com/ distinto de la demo del autor para que veas que funciona perfectamente. Si me mandas tu plantilla donde lo has implementado la echaría un vistazo.
Saludos.

Admin

Gracias, todo funciona bien a la perfección, gracias por tu aporte, lo estaba buscando y fue muy eficiente. :D Saludos.

» Escribe tu comentario aquí:


Si quieres hacer alguna consulta sobre tu blog habilita tu perfil o deja un enlace a tu blog:
<a href="url-de-la-página">Texto enlace</a>

» O utiliza el antiguo formulario


Los comentarios están siendo moderados y publicados lo antes posible.



jesgo23 ©2008/2009 | Plantilla Blogger | Diseño jesgo Creative Commons License