s3Slider, otro carrusel de fotos en Blogger

En Julio a petición de un lector les deje un codigo para crear un efecto Carrousel en sus paginas web o blogs. Sin embargo algunos comentarios que llegaron a mi mail me contaban que se les complicaba mucho.

Revisando en la web encontre en jesgo23 una nueva forma de crear un carrusel en tu pagina web o en tu blog. Esta disponible para Blogger.. asi que pilas.

1. Descarga los archivos Bajamos los ficheros jquery.js y y s3slider.js y los alojamos en nuestro alojamiento habitual. Bajalos Aqui.

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

Y para terminar y darle su respectiva forma CSS, nos ubicamos 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;

}

Pages