Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Galería de imágenes en el blog (script)

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.

Mónica Viviana Silvestre dice...

Interesantísimo, gracias por la información

Un saludo, cariños

Jaime Trujillo Escobedo dice...

Mónica, muchas gracias por comentar. Me encanta saber que te ha gustado.

¡Saludos!

Jéssica YK dice...

Se ve muy bien el resultado; voy a probarlo par ver qué tal :)

Saludos y que tengas un buen fin de semana!

Jaime Trujillo Escobedo dice...

Así es Jéssica YK, y además es muy sencilla de implementar.

¡Ya me contarás! :D.

También te deseo un buen fin de semana.

GuillermoVM dice...

Como siempre mi buen amigo Jaime un excelente Truco, saludos Amigos, felicidades por tu Blog.

bleid dice...

Hola Jaime
estoy intentando hacerlo, copio el codigo y sustituyo la url de la pagina por la mia, y he alojado enimageshack las fotos copiando la url despues en el codigo y no me sale nada
saludos

Laube dice...

Ahhhhhhhhhh, pues qué interesante. Probaré!!!!!

Jaime Trujillo Escobedo dice...

Hola bleid. ¿Pusiste las seis imágenes? si no lo hiciste, quizás ese sea el problema. Debes eliminar las líneas de imagen que no necesites (líneas como la del segundo código).

Jaime Trujillo Escobedo dice...

Laube, ¿verdad que sí? ¡suerte!

Jaime Trujillo Escobedo dice...

Muchas gracias GuillermoVM, me alegro de que te haya gustado la galería.

bleid dice...

hola jaime
gracias por tu respuesta
si que puse las 6 imagenes pero me da error
he de poner en cada linea la url de mi pagina?
saludos

Jaime Trujillo Escobedo dice...

bleid, pués me temo que hemos dado con el problemilla ;).

Si quieres puedes ponerle a cada imagen la dirección de tu blog o simplemente eliminar la línea para insertar la URL, de manera que las líneas de imágenes te queden así:

imagengaleria[X]='<img border="0" src="URL DE LA IMAGEN">'

Recuerda que debes cambiar la X por el número de la imagen que sea (como indico en la entrada).

Marcus dice...

Hola Jaime!
Hace tiempo que no me paso por aquí, pero es que los estudios...
Por cierto, muy interesante esto de las imagenes, lo de proteger tu blog del copiar y pegar...
Me alegro de poder volver a pasar por el Balcón!

Jaime Trujillo Escobedo dice...

¡¡Marcus, y yo de volverte a tener por aquí!!

No te preocupes, todos tenemos temporadas en las que no tenemos tiempo ni para encender el ordenador.

Estoy muy contento de haber leído otra vez uno de tus comentarios ☺.

David dice...

Esto se podria poner en una entrada?

Jaime Trujillo Escobedo dice...

David, posiblemente pero sería algo complicado.

Por otro lado, hay otra galería de imágenes que usa la propiedad marquee (ver entrada) puede insertarse en entradas de forma sencilla.

Marga dice...

Hola Jaime !!!
Es la una de la madrugada y acabo de terminar de poner este truqui en mi blog. Para mi gusto ha quedado muy chuli !!!
Que te parece ???

Un abrazo
Marga

Jaime Trujillo Escobedo dice...

Hola Marga, Ya veo, ya veo ^^.

Quisiera decirte que te ha quedado... ¡¡Espectacular!! :P

Me encanta ver fotografías y a decir verdad, me estoy quedando "pegado" a la pantalla viendo las deliciosas recetas que preparas.

Bueno, espero que Viatgesbenjaimarga siga así de bonito.

¡Abrazos!

Marga dice...

Gracias Jaime por tus lindas palabras pero sobre todo por enseñarnos tan bien todos esos truquitos.

Un abrazo
Marga

Jaime Trujillo Escobedo dice...

Marga, sabes bien que adoro ayudaros con estos trucos.

¡Abrazos!

Universo_Z dice...

Hola el truco esta genial. Mi problema es que me duplica la imagen(si pongo 3 con la respectiva url de la pag + url de la imagen me salen 6) y al probar de 0 a 9 imagenes ya no sale nada. Si tienes tiempo y te pasas por mi blog te daras cuenta, muchas gracias.
http://universo-zeta.blogspot.com/

Universo_Z dice...

No se si te han llegado mis dudas o no has tenido tiempo. Mi problema es que se me duplican las imagenes y salen de la plantilla, si vas a mi blog te daras cuenta. Muchas gracias
http://universo-zeta.blogspot.com/

Jaime Trujillo Escobedo dice...

Universo_Z, la cuestión más probable por la que se repiten tus imágenes es a causa de la numeración (en los códigos iimagengaleria[5]=). ¿Tienes más de seis imágenes?

También puede deberse a la dirección / URL de la imagen, que haya podido repetirse en varias líneas del script.

Universo_Z dice...

Hola muchas gracias por tu respuesta ya logre arreglarlo. Mi problema era poner mas de 5 imagenes, entonces comence con 1,2,3 y asi hasta 5 pero ahi no me mostraba nada. revise el script y como muestra arriba el 5 repite la "i" al borrarla arregle y pude poner mis 11 imag. Ojala lo corrijas para futuros seguidores. Nota: estoy usando el metodo antiguo porque mande algunos mensajes y el que me funciono fue este. Saludos y nuevamente gracias me gusto como me quedo.
http://universo-zeta.blogspot.com/

Jaime Trujillo Escobedo dice...

Universo_Z, muchísimas gracias por haberme avisado de este pequeño error, ya está editado.

Me alegra muchísimo que hayas podido arreglarlo y que, por fin, tengas tus once imágenes en la galería.

¡Saludos!

Marga dice...

Hola Jaime !!!!! Que tal estás ???
Por motivos familiares, hace algún tiempo que ando un poco desconectada de todo...

Quería preguntarte una cosa. Verás ya hace unos meses puse esta galería de imágenes y quedó perfecta, tu ya lo vistes. Pero desde hace unos días, aparte de que tarda mucho en cargar, va super lenta y aunque aumente la velocidad, sigue igual. Puede tener algo que ver que quizás el blog esté demasiado cargado de imágenes ??? Además las imágenes que tengo en la sidebar de 125x125 hasta ahora me salían en columna de a dos, y ahora salen una debajo de otra ..... No sé quizás ha cambiado algo en blogger y no me he enterado !!!!

Gracias Jaime !!!
Un abrazo
Marga

Jaime Trujillo Escobedo dice...

¡Margaaa! Estoy encantado de que hayas vuelto.

Al parecer blogger no ha realizado cambios recientes (salvo en el caso de la configuración de comentarios) y el problema puede estar en el alojamiento de tus imágenes.

¿Alojaste las imágenes en blogger o utilizaste sitios web como Imageshack o Tinypic?

El tamaño de las imágenes también interfiere en el tiempo de carga. No es lo mismo incluir una imagen con un peso de 200KB en una entrada que una imagen de 320MB (esta última será más pesada).

Espero tu respuesta para ofrecerte soluciones.

¡Un fuerte abrazo, amiga!

Marga dice...

Hola Jaime !!!
Yo las imágenes las subo directamente al blog.Es mejor hacerlo de otra forma??
Siempre las he subido tal cual, pero esta última vez las hice más pequeñas en Webresizer, ya espresamente para no cargar demasiado el blog. Una imagen de 4125,37 Kb, me la convirtió en 60,60 Kb.
(Yo te de todo esto no me entero demasiado jejeje)

Ya me dirás como puedo hacerlo de la mejor manera.

Gracias y un abrazo
Marga

Jaime Trujillo Escobedo dice...

Marga, debo comentarte que utilizando Mozilla Firefox tu blog carga todos sus elementos pero si es cierto que tarda más.

Al parecer en tu plantilla hay varias imágenes alojadas en Imageshack y que forman parte del diseño de tu plantilla. Lo mejor sería alojarlas, como bien hiciste con las citadas en tu comentario, usando el propio blogger.

Otro dato que puede ayudarte tiene relación con el gadget de seguidores. Si te fijas bien, mi gadget de seguidores aparece al final de mi barra lateral. Si lo colocas al final del bloque de entradas o en el footer acelerarás el blog.

En mi última propuesta, se me ocurre recomendarte que muestres algún gadget (como el traductor) recogido de manera que los lectores puedan desplegarlo cuando lo deseen pero no interfiera en la carga del sitio.

- Entrada al respecto.

Espero que con todo esto, Viatgesbenjaimarga cargue con rapidez.

¡Abrazos!

Marga dice...

Hola Jaime, gracias por tus rápidas respuestas.

Lo primero que he hecho ha sido poner los seguidores al final de todo de la sidebar y aplicar el truqui del traductor, creo que ahora va algo mejor.
Y quería preguntarte si con este mismo truco puedo aplicarlo a las entradas para que se vean como tu lo tienes, o tendría que hacerlo de otra forma???

Lo que no consigo saber es lo de los banners de 125x125 por que me salen en una sola fila ....

Lo que tampoco acabo de entender es lo que me dices de las imagenes que configuran la plantilla ....

Bueno no te preocupes, ya poquito a poco.

Gracias por tu paciencia Jaime !!!!

Un abrazo
Marga

Jaime Trujillo Escobedo dice...

Un placer, Marga. Olvidé recomendarte el truco al que te refieres, el de los artículos resumidos en la portada del blog.

Para instalarlo en tu blog utiliza este otro truco en lugar del que te recomendé para ocultar el formulario ya que dicho script oculta únicamente contenido (no secciones del blog).

Si necesitas ayuda durante la instalación avísame. Gracias a ti por comentar.

¡Abrazos!

varech dice...

Hola Jaime: ya estamos otra vez por aquí después del veraneo. ¿Qué tal? Ya veo que no paras.
"Tengo una pregunta para ti", como dicen en la tele:
Tengo en el blog varios slid, y he puesto una página estática con otro, pero con imágenes más grandes. De un tiempo acá, es mucha la publicidad y estoy harta de muñequitos, así que he pensado poner la galería como tú la tienes, que me parece mucho más seria.
¿Cuál me aconsejas que ponga, teniendo en cuenta que la fotos van a ser más grandes que las de la barra?
Un abrazo

Jaime Trujillo Escobedo dice...

¡Qué alegría volver a escribirnos Varech! Me ha gustado la frase tengo una pregunta para ti...

Tratándose de imágenes relativamente grandes te aconsejaría esta galería ya que es fácil de instalar y ofrece efectos muy atractivos para fotos de gran tamaño.

Si necesitas cualquier cosa al instalarla avísame. ¡Abrazos!

varech dice...

Gracias Jaime. Esta misma semana lo pondré.
Me alegro mucho de que hayas sobrevivido a la mudanza, jeje... Es de las peores cosas que le pueden acontecer al ser humano.
Un abrazo.

Jaime Trujillo Escobedo dice...

¡Así es! Jajaja. Espero que pase mucho tiempo hasta la próxima mudanza. Suerte con la instalación. ¡Abrazos!

Javier dice...

Me ha costado un poquitín conseguirlo, pero dicen que el que la sigue la consigue!!

Como siempre muchas gracias

Saludos y buen fin de semana

Jaime Trujillo Escobedo dice...

¡Un refrán muy cierto, Javier! Me alegra que hayas instalado ya tu galería.

Buen fin de semana para ti también.

Amagador dice...

Hola, me ha servido mucho para mi sitio web esta galería de imágenes, ahora puedo colocar más y queda mejor para la vista del sitio.

Gracias, estaré atento a este blog.

Saludos

Jaime Trujillo Escobedo dice...

¡Bienvenido Amagador! Muchas gracias por instalar la galería en tu blog, ha quedado muy bien. Lo mejor de todo es, como bien dices, que ahora la cantidad de imágenes puede ser mayor.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo