Slide sencillo con javascript

Veremos como implementar un sencillo slide de imágenes en la sección crosscol de nuestro blog (debajo del header).

Antes de nada debemos fijarnos si en nuestra plantilla la sección del crosscol está habilitada, y si no es así, seguiremos las indicaciones de esta entrada.

Es muy fácil de implementar y será un recurso muy vistoso para cualquier blog.
En cada imagen que incluyamos en el slide tenemos la posibilidad de añadir un enlace. En mi ejemplo cada imagen está enlazada con una entrada en concreto, pero puede enlazarse con una etiqueta por ejemplo e incluso con una página externa.

Antes de empezar con la explicación para incluirlo y para que lo entendáis mucho mejor, podéis ver un ejemplo funcionando en este blog de pruebas.


[1] En nuestro panel de Blogger nos situamos en la pestaña de Diseño y añadimos un nuevo gadget HTML/Javascrip.

[2] Copiamos y pegamos este código dentro del gadget:

<script type="text/javascript">
//Ancho (en pixeles)
var sliderwidth="960px"
//Alto
var sliderheight="144px"
//Velocidad 1-10
var slidespeed=1
//Color de fondo:
slidebgcolor="black"

//Vínculos y enlaces de las imágenes
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="URL_DE_LA_ENTRADA" title="TITULO_ENTRADA >> ETIQUETA"><img border="0" src="URL_DE_LA_IMAGEN"></a>'

leftrightslide[1]='<a href="URL_DE_LA_ENTRADA" title="TITULO_ENTRADA >> ETIQUETA"><img border="0" src="URL_DE_LA_IMAGEN"></a>'

leftrightslide[2]='<a href="URL_DE_LA_ENTRADA" title="TITULO_ENTRADA >> ETIQUETA"><img border="0" src="URL_DE_LA_IMAGEN"></a>'

leftrightslide[3]='<a href="URL_DE_LA_ENTRADA" title="TITULO_ENTRADA >> ETIQUETA"><img border="0" src="URL_DE_LA_IMAGEN"></a>'

leftrightslide[4]='<a href="URL_DE_LA_ENTRADA" title="TITULO_ENTRADA >> ETIQUETA"><img border="0" src="URL_DE_LA_IMAGEN"></a>'

leftrightslide[5]='<a href="URL_DE_LA_ENTRADA" title="TITULO_ENTRADA >> ETIQUETA"><img border="0" src="URL_DE_LA_IMAGEN"></a>'

leftrightslide[6]='<a href="URL_DE_LA_ENTRADA" title="TITULO_ENTRADA >> ETIQUETA"><img border="0" src="URL_DE_LA_IMAGEN"></a>'

leftrightslide[7]='<a href="URL_DE_LA_ENTRADA" title="TITULO_ENTRADA >> ETIQUETA"><img border="0" src="URL_DE_LA_IMAGEN"></a>'

leftrightslide[8]='<a href="URL_DE_LA_ENTRADA" title="TITULO_ENTRADA >> ETIQUETA"><img border="0" src="URL_DE_LA_IMAGEN"></a>'

leftrightslide[9]='<a href="URL_DE_LA_ENTRADA" title="TITULO_ENTRADA >> ETIQUETA"><img border="0" src="URL_DE_LA_IMAGEN"></a>'



var imagegap=""
var slideshowgap=5


var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width="+sliderwidth+" height="+sliderheight+" name="ns_slidemenu" bgcolor="+slidebgcolor+">')
write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed" name="ns_slidemenu2"></layer>')
write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed" name="ns_slidemenu3"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

[3] Es en este código donde hemos de incluir las imágenes y sus enlaces.
Los cambios son sencillos de entender y he destacado además en negrita lo que tenéis que sustituir en cada caso.

En el caso de las imágenes que vamos a utilizar, lo adecuado sería usar imagenes de la misma medida en su altura para lograr un diseño óptimo.


Modificaciones:

Es en la primera parte del script donde podemos hacer los cambios precisos para ajustar el slide a las medidas y necesidades de cada uno:

var sliderwidth="960px" Aquí pondremos el ancho adecuado al slide.

var sliderheight="144px" Aquí el alto que tendrá el slide. Para que quede lo mejor posible, lo ideal es darle unos cinco pixeles más de lo que medirán en altura nuestras imágenes.

var slidespeed=1 Aquí escogemos la velocidad de desplazamiento de las imágenes.

slidebgcolor="black" Color de fondo del slide. En negro (black) en el ejemplo.

var imagegap="" Lo he dejado vacío en el ejemplo, si ponemos ahí un valor (por ejemplo:var imagegap="2") , será la distancia entre imagen e imagen, a mayor valor mayor distancia.

[4] Una vez preparado el código, guardamos los cambios.