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 Un clic en “Plantilla”
2 Un clic en “Editar HTML”
En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,
3 Busca el siguiente código
---
</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>
<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.
------------------------------------------------------------------------------------------------------
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
-----------------------------------------------------------------------------------------------------
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:
1-Un clic en “Diseño”
2-Clic en “Añadir un gadget”
3-Busca el widget que dice “HTML-Javascript” y ábrelo
4-Coloca el siguiente codigo en el interior
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>
<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.
Fuente; masaudaz
Publicado por;
No hay comentarios:
Publicar un comentario