Carrousel automático con las imágenes de las entradas de tu blog

Tweet

08/08/2011

17:43

Ando entretenido en una plantilla para Blogger que me apetecía hacer y su autor me pidió un carrousel automático con las imágenes de sus entradas. No hay mucho publicado sobre carrousel automáticos que generen automáticamente el contenido del mismo, así que he usado un script de Abu Farhan que captura las imágenes y los títulos del feed para mostrarlo y lo he animado con JQuery.


Aun no puedo mostraros como ha quedado pero es muy parecido a esta demo, las imágenes se van desplazando automáticamente de izquierda a derecha, el número de ellas que queremos mostrar es configurable por el usuario y pulsando sobre ellas accedes a la entrada publicada.

Para insertarlo debemos colocara antes de ]]></b:skin>

#carrousel ul{
margin:30px 10px;
padding:10px;
width:960px !important;
height:100px !important;
overflow:hidden;
}
#carrousel li{
margin:10px;
list-style:none;
position:relative;
float:left;
}
#carrousel img{
width: 80px !important;
height: 80px !important;
border: 1px solid #ccc;
background: #f5f5f5;
padding:5px;
}

Aquí deberéis ajustar el ancho del carrousel al tamaño de vuestro blog.

Insertamos la librería JQuery y el plugin del carrousel antes de </body>(los que ya la usáis no es necesario, solo debéis ajustar el plugin para el carrousel, usad el packet.js).

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='URL ALOJAMIENTO PLUGIN' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#carrousel ul&quot;).carouFredSel({
auto : {
items : 1,
duration : 3000,
easing : &quot;linear&quot;,
pauseDuration : 0,
pauseOnHover : true
}
});
});
</script>

Debéis bajaros el plugin, subirlo a vuestra web de alojamiento e insertar su url en el código.

Por ultimo guardamos los cambios y añadimos un elemento HTML a nuestra plantilla, donde insertamos el contenido de este fichero.

No olvidéis insertar el nombre de vuestro blog con su url (www.nombredelblog.blogspot.com) en este apartado donde pongo URL DE TU BLOG.

+ Artículos relacionados de Tutorial