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.

Simple galería de imágenes usando la propiedad marquee

Si quieres poner una galería de imágenes en tu blog y quieres hacerlo de forma simple y rápida este es tu truco.

> Ver Ejemplo

Tan solo necesitarás alojar tus imágenes en un espacio tal como Imageshack o Tinypic.

Una vez tengas las imágenes podremos comenzar.


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









Pega este bloque:

<marquee widht="300" direction="left" style="border: 2px solid #cccccc;" onmouseover="this.scrollAmount=1" scrollamount="1" onmouseout="this.scrollAmount=2">

<img heigth="70" width="70" src="URL DE TU IMAGEN"/>

<img heigth="70" width="70" src="URL DE TU IMAGEN"/>

<img heigth="70" width="70" src="URL DE TU IMAGEN"/>

<img heigth="70" width="70" src="URL DE TU IMAGEN"/>

</marquee>

Y sustituye en cada caso, URL DE TU IMAGEN por la dirección de esta última (que previamente alojaste).

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

Con este código podrás añadir un total de 4 imágenes. En caso de querer añadir más, inserta esta línea tantas veces como necesites:

<img heigth="70" width="70" src="URL DE TU IMAGEN"/>

Recuerda que siempre debes agregarla antes del cierre </marquee>

Ahora vamos a hablar del tamaño. En las líneas del código econtrarás las propiedades heigth="70" y width="70", que representan la altura y anchura de la imagen, respectivamente.

Puedes ajustar el tamaño que tendrá cada imagen incrementando o disminuyendo el valor 70, situado dentro de las comillas.

En todas las líneas deberíamos tener los mismos valores (que en este caso se trata de 70 x 70) para evitar que la galería se "desarme".

La galería está enmarcada con un borde de color gris, con un grosor de 2 píxeles. Puedes editar el color, el estilo y el grosor en esta línea:

border: 2px solid #cccccc;

Para obtener el código de cualquier color utiliza la tabla de colores.

Para cambiar el estilo del borde (que en este caso es solid) mira esta entrada.

Finalmente guarda el gadget.

Gildo Kaldorana dice...

Muy bueno y simple.
Me lo guardo, porque en el Slide que tengo, no se como se me ha colado musica (bueno, supongo que cuando lo hice de la web www.slide.com) y cuando se abre la pagina se abre la música que no se como quitarla, he probado manipulando el widget pero ni por esas.
Gracias.
Un saludo

Inmortal dice...

Hola Quedo muy bien y elegante, saludos amigo

Jaime Trujillo Escobedo dice...

Gracias Gildo Kaldorana. Seguramente al crear la galería de imágenes tengas la opción de añadir audio o habiltar la reproducción automática.

Intenté hacerlo utilizando &autoplay=0 pero sigue sonando la música al abrir el blog.

Creo que lo mejor será hacer una galería sin música y poner la música aparte en un reproductor que se "encienda" al pulsar el botón play :S.

Desde que descubra una forma de conseguir que la música no se reproduzca automáticamente te avisaré.

¡Saludos!

Jaime Trujillo Escobedo dice...

Me alegro mucho, GuillermoVM.

¡Saludos!

Anónimo dice...

No me funciona, será porque ya utilizo otras marquee en el blog??? en fin, muchas gracias y vere si puedo solucionar el problema, si sabes cual es me avisas ok?? saludos, nos vemos

Deybi dice...

Hay que probar esto, yupi :D.

Jaime Trujillo Escobedo dice...

¡Suerte Deybi! ;)

Jaime Trujillo Escobedo dice...

Ascesino96, Así es. Yo tenía el mismo problema con las marquesinas.

Pero tranquilo, te dejo con esta entrada en la que explico la forma de crear una galería de imágenes muy parecida a esta pero con un script (en lugar de utilizar la propiedad marqee).

De esta forma no tendrás que deshacerte de las otras marquesinas.

el Zambullista dice...

Hola, Jaime. Muy útil tu blog para diseñar otros. Apliqué este truco al mío, pero no en un gadget sino en esta entrada.
Con Firefox 3.x y con K-Meleon la galería se ve bien, pero con Internet Explorer (tengo la versión 8) las imágenes se alinean verticalmente y lo que corre de izquierda a derecha es una larga columna de fotos. Te comento que eso me pasó también al principio en Firefox cuando pegué el código, pero lo solucioné eliminando los saltos de línea ("enter") entre foto y foto (que después reemplacé por un espacio, para que no se pegaran los marcos). Probé hacer lo mismo en el editor html de la entrada en IE8, pero nada. ¿Se te ocurre alguna solución? Muchas gracias, desde ya.

el Zambullista dice...

Hola, Jaime. No te preocupes por mi consulta anterior. Al final cambié la galería deslizante por otra estática. Saludos.

Jaime Trujillo Escobedo dice...

Ya veo, el Zambullista. Aún así, si necesitas cualquier otra cosa solo tienes que hacérmelo saber. ¡Saludos!

Anónimo dice...

Muchisimas gracias !!!!!

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