Slideshow de imágenes para tu blog con jQuery

Todas las personas que poseen un blog siempre tratan de hacerlo lo más atractivo posible para sus visitantes. Y una gran opción para hacer tu blog más atractivo es añadiéndole un slideshow de imágenes. En el slideshow puedes mostrar las imágenes más resaltantes, y puedes añadir la cantidad de imágenes que desees. No sólo eso, podrás añadirle un título y una descripción breve para cada imagen, que al dar click en ellas te llevará al artículo correspondiente de la imagen que quieres hacer llegar a tus lectores ó visitantes.

VER DEMO

Podrás ajustar el tamaño y ancho del slideshow, al igual que la velocidad de las imágenes que se muestra. Parece difícil, pero en realidad no lo es, sólo te tomará algunos pasos para tener este sencillo, pero elegante slideshow en tu blog.

1) Nos vamos a Blogger > Diseño >  Edición de HTML

2) Buscamos ahora la siguiente etiqueta en la plantilla:

</head>

3) Ahora justo encima (ó antes) de esa etiqueta, pegamos lo siguiente:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(4500);

});

function slideShow(speed) {


//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
        function () {
                clearInterval(timer);
        },
        function () {
                timer = setInterval('gallery()',speed);
        }
);

}

function gallery() {


//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
                //Display the content
                $('#slideshow-caption h3').html(title);
                $('#slideshow-caption p').html(desc);
                $('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

<style type='text/css'>
ul.slideshow {
list-style:none;
width:500px;
height:350px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:500px;
height:350px;
border:none;
}
#slideshow-caption {
width:500px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

Si ya tienes el script de jQuery en tu plantilla, entonces no agregues lo que está de color verde. Guarda los cambios de tu plantilla.




4) Ahora necesitamos añadir un gadget, para ellos nos vamos a Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript:

5) Ahora dentro pegamos lo siguiente:

<ul class="slideshow">
<li><a href="#"><img src="URL de la imagen" title="Título de la imagen aquí" alt="Descripción de la imagen aquí" /></a></li>
<li><a href="#"><img src="URL de la imagen" title="Título de la imagen aquí" alt="Descripción de la imagen aquí" /></a></li>
<li><a href="#"><img src="URL de la imagen" title="Título de la imagen aquí" alt="Descripción de la imagen aquí" /></a></li>
<li><a href="#"><img src="URL de la imagen" title="Título de la imagen aquí" alt="Descripción de la imagen aquí" /></a></li>
<li><a href="#"><img src="URL de la imagen" title="Título de la imagen aquí" alt="Descripción de la imagen aquí" /></a></li>
<li><a href="#"><img src="URL de la imagen" title="Título de la imagen aquí" alt="Descripción de la imagen aquí" /></a></li>
</ul>

6) Ahora necesitas hacer los siguientes cambios:


Lo que está de color azul:


> URL de la imagen: Aquí la URL de la imagen (el enlace).


> Título de la imagen aquí: Aquí le agregas un título a la imagen correspondiente.


> Descripción de la imagen aquí: Aquí le agregas una descripción breve de la imagen correspondiente.


> #: Los asteriscos son los enlaces de los artículos que enlazan las imágenes. 




Opcional:


Lo que está de color rojo:



> width:500px y height:350px son el ancho y el alto del slideshow y está en el código 2 veces, así que si decides cambiarlo, no te olvides de cambiarlo 2 veces también.


> width:500px y height:70px son el ancho y el alto del cuadro negro que va dentro del slideshow; es decir, donde va el título y la descripción de las imágenes.




Lo que está sombreado de amarillo:


> 4500: Esta es la velocidad con que se muestra cada imagen al pasar. Si aumentas su valor, la velocidad será menor. Si disminuyes su valor, cada imagen pasará más rápido.




7) Hecho los cambios respectivos, guardas los cambios de tu gadget y voyla! con eso tendrás un elegante slideshow en tu blog.
Imprimir artículo