Galería de imágenes en el blog

Otra forma de incluir una galería de imagenes en el blog.
Para empezar utilizaremos un script que lo pegaremos en un gadget. Para poder visualizar las imagenes necesitamos un sitio donde alojarlas, yo les sugiero que utilicenImageshack oTinypic para poder obtener su URL (dirección) y así insertarla en la galería.

Paso para insertar la galeria de imagenes en el blog:

  • Diseño>añadir gadget (elemento de página)>html-javascript
  • Pegar el 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>'

iimagengaleria[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 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.

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.

Fuente: elbalcondejaime

1 comentarios:

Rodrigo Acuña Bravo dijo...

Hola, saludos desde Chile

puedo añadir esta galería en una página estática ?

Saludos
www.lucesysombras.cl

Publicar un comentario

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika