Una galería de imágenes en el blog

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.


Previamente aprendimos a crear una galería muy simple utilizando la propiedad marquee.

Hoy voy a enseñarte otra forma de incluir una galería (también bastante simple) en el blog, utilizando un script que pegaremos en un gadget.

> Ver Ejemplo

Como he dicho en otros posts, necesitarás alojar tus imágenes en un espacio tal como Imageshack o Tinypic para poder obtener su URL (dirección) y así insertarla en la galería.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este script:

<script type="text/javascript">

var velocidadgaleria=1

var anchogaleria="600px"

var altogaleria="140px"

fondogaleria="#ffffff"

var espacioslide=5
var espacioimagen=""
var imagengaleria=new Array()
var fotofinal=''

imagengaleria[0]='<a href="URL DE LA PAGINA" target="blank"><img border="0" src="URL DE LA IMAGEN"></a>'

imagengaleria[1]='<a href="URL DE LA PAGINA" target="blank"><img border="0" src="URL DE LA IMAGEN"></a>'

imagengaleria[2]='<a href="URL DE LA PAGINA" target="blank"><img border="0" src="URL DE LA IMAGEN"></a>'

imagengaleria[3]='<a href="URL DE LA PAGINA" target="blank"><img border="0" src="URL DE LA IMAGEN"></a>'

imagengaleria[4]='<a href="URL DE LA PAGINA" target="blank"><img border="0" src="URL DE LA IMAGEN"></a>'

imagengaleria[5]='<a href="URL DE LA PAGINA" target="blank"><img border="0" src="URL DE LA IMAGEN"></a>'

var copyspeed=velocidadgaleria
imagengaleria='<nobr>'+imagengaleria.join(espacioimagen)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+imagengaleria+'</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=imagengaleria
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+espacioslide+"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(imagengaleria)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+espacioslide
ns_slide2.document.write(imagengaleria)
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+espacioslide+"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+espacioslide+"px"

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

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+espacioslide
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+anchogaleria+';height:'+altogaleria+';overflow:hidden">')
write('<div style="position:absolute;width:'+anchogaleria+';height:'+altogaleria+';background-color:'+fondogaleria+'" onmouseover="copyspeed=0" onmouseout="copyspeed=velocidadgaleria">')
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="+anchogaleria+" height="+altogaleria+" name="ns_slidemenu" bgcolor="+fondogaleria+">')
write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=velocidadgaleria" name="ns_slidemenu2"></layer>')
write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=velocidadgaleria" name="ns_slidemenu3"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

Para editar la galería:

var velocidadgaleria=1 es la velocidad a la que se moverán las imágenes. Según incrementes la cifra (en este caso está en 1) el movimiento será más rápido.

var anchogaleria="600px" es el ancho que tendrá el recuadro de la galería. Cambia el valor (600) por el que mejor se adapte a tu blog.

var altogaleria="140px" es la altura. En este caso será de 140 píxeles pero puedes cambiarla al valor que desees.

fondogaleria="#ffffff" es el color del fondo que aparecerá detrás de cada imagen. En este caso es blanco (#ffffff) pero puedes cambiarlo a tu color favorito con la ayuda de la tabla de colores.

Una vez lo hayas configurado todo, procederemos a insertar las imágenes.

Para ello, sustituye en cada caso URL DE LA IMAGEN por la dirección de tu fotografía.

Si no sabes como obtener la URL de una imagen, lee esta entrada.

Tienes un total de 6 espacios para incluir imágenes. Si deseas poner una mayor cantidad en la galería, agrega esta línea tantas veces como desees:

imagengaleria[X]='<a href="URL DE LA PAGINA" target="blank"><img border="0" src="URL DE LA IMAGEN"></a>'

Debes ponerla debajo de la última imagen, es decir, la número 5. Es muy importante que cambies el número que hay al lado de imagengaleria (en este caso está representado con una X).

Si lo deseas puedes añadirle un enlace a cada imagen. Para ello sustituye en cada caso URL DE LA PAGINA por la dirección de tu blog o web.

Para terminar, guarda el gadget.