Inicio > Tutoriales > Slideshow de artículos destacados

Slideshow de artículos destacados

diciembre 17, 2009

Preparativos
Antes de hacer nada, os recomiendo que tengais un dominio web, en mi caso uso tripod, podeis usar los links de mi dominio pero no lo recomiendo. Necesitas descargar este archivo, y subir a tu dominio los archivos “jquery.js” y “s3Slider.js”. Una vez hecho esto, copia los links de la ubicación de esos archivos.

HTML
Ahora empezamos con HTML. En primer lugar decir que todas las imagenes que subas deberán tener el mismo tamaño que especifiques en css más abajo, si no lo haces darán lugar a deformaciones. Y sin más, pega los links de los archivos que deberías haber subido, tal y como está lo rojo sobre /head:

<!– Archivos slideshow –>
<script src=’URL_DONDE_HAS_ALOJADO_EL_PLUGIN_JQUERY.JS’ type=’text/javascript’/>
<script src=’URL_DONDE_HAS_ALOJADO_EL_PLUGIN_S3SLIDER.JS’ type=’text/javascript’/>
<!– Archivos slideshow –>
</head>

Ahora, bajo body, pegamos lo siguiente. el valor 4000 se refiere a los milisegundos entre imagen e imagen.

<body>
<!– Archivos slideshow –>
<script type=’text/javascript’>
$(document).ready(function() {
$(‘#s3slider’).s3Slider({
timeOut: 4000
});
});
</script>
<!– Archivos slideshow –>

El siguiente lo ponemos sobre ]]>. En este hay varias variables que determinarán nuestro slideshow, como la fuente de letra que usará, el tamaño de las imagenes, la posición de la barra descriptiva…así que cambialas a tu gusto, o déjalas como están y tendrás el mismo slideshow que yo.

El siguiente tiene las imagenes de 200×120 y el texto en la parte inferior.

<!– Archivos slideshow –>
#s3slider {
width: 200px; /* mismo ancho que las imagenes */
height: 120px; /* misma altura que las imagenes */
position: relative; /* importante */
overflow: hidden; /* importante */
}#s3sliderContent {
width: 200px; /* mismo ancho que las imagenes */
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: 200px;
background-color: #000;
filter: alpha(opacity=70); /* opacidad de la caja de texto */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
bottom: 0;

/*
si pones
top: 0; -> la caja de texto se mostrará en la parte superior
si pones
bottom: 0; -> la caja de texto se mostrará en la parte inferior
*/
}

.clear2 {
clear: both;
}
<!– Archivos slideshow –>
]]></b:skin>

Poniendo el Slideshow

Una vez configurado eso, vamos a ponerlo (elementos de página en Blogger, gadget HTML/Java). Para ello, pegamos lo siguiente:

<div id=”s3slider”>
<ul id=”s3sliderContent”>
<li>
<a href=”http://TUENLACE1″><img src=”http://TUIMAGEN1″/></a&gt;
<span>Imagen 1 sobre X temar</span>
</li>
<div/>
</ul>
</div>

¿Veis la parte de <li> hasta </li>? Esa es la parte correspondiente a una imagen y un link más una pequeña descripción. Así que, cuantas más veces pegues esa parte, más imagenes usarás. Recomiendo un máximo de 8 imagenes, para no tener líos.

EJEMPLO:

Yo uso 5, y me queda el código del elemento así:

<div id=”s3slider”>
<ul id=”s3sliderContent”>
<li>
<a href=”http://animally-pensando.blogspot.com/2009/11/card-sagas-wars.html”><img src=”http://img690.imageshack.us/img690/8950/41109.gif”/></a&gt;
<span>Ahruon y Orkimides, son los…</span>
</li>
<li>
<a href=”http://animally-pensando.blogspot.com/2009/11/en-esta-generacion2.html”><img src=”http://img690.imageshack.us/img690/1953/21109.gif”/></a&gt;
<span>Y bueno, todavía quedaron c…</span>

</li>
<li>
<a href=”http://animally-pensando.blogspot.com/2009/10/tanda-de-videos-24-malas-elecciones.html”><img src=”http://img11.imageshack.us/img11/6619/241009.gif”/></a&gt;
<span>Lo que parece bueno muchas…</span>

</li>
<li>
<a href=”http://animally-pensando.blogspot.com/2009/10/megaman-9-analisis-e-impresiones.html”><img src=”http://img687.imageshack.us/img687/7881/211009.gif”/></a&gt;
<span>Por hablar de algo, hoy os…</span>
</li>
<li>
<a href=”http://animally-pensando.blogspot.com/2009/10/jueguiles-gratuiles-ii-runman-el-sonic.html”><img src=”http://img23.imageshack.us/img23/147/41009.gif”/></a&gt;
<span>Para que luego digan que lo…</span>
</li>
<div/>
</div></ul></div>

Vía (C&P): Animally’s Blog

Anuncios
Categorías:Tutoriales
A %d blogueros les gusta esto: