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.

Slideshow o mini-galería de imágenes en tu blog

Algo que suele fascinarme son las galerías de imágenes, sobre todo si tienen efectos atractivos como los muchos que ofrece jQuery.

En esta entrada me gustaría ofrecerte un slideshow o mini-galería de imágenes que puedes instalar en la barra lateral de tu blog (¡tiene el ancho perfecto!) con tus propias imágenes. Además, podrás atribuírle un título a cada fotografía y tus lectores dispondrán de la opción play/pause para controlarla con un clic.

trucos blogger, galeria de imagenes blogger, galeria blogger, slideshow blog blogger, slideshow

Puedes ver el slideshow en funcionamiento accediendo a este blog. No olvides pasar el cursor por encima de alguna imagen para comprobar la aparición del título y los botones de navegación.


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




Pega este código:

<script type="text/javascript" src="http://sites.google.com/site/scriptsbalcon/b/bljquery1.2.6.js"></script>

<style type="text/css">
#simplegallery1{position: relative; visibility: hidden; border: 6px solid #f4f4f4;}
#simplegallery1 .gallerydesctext{text-align: left; padding: 2px 5px;} </style>

<script type="text/javascript" src="http://sites.google.com/site/scriptsbalcon/b/blslideshow1.js">
/***********************************************
* Simple Controls Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>

<script type="text/javascript">
var mygallery=new simpleGallery({
wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [200, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["URL IMAGEN", "ENLACE", "", "TEXTO"],

["URL IMAGEN", "ENLACE", "", "TEXTO"],

["URL IMAGEN", "ENLACE", "", "TEXTO"],

["URL IMAGEN", "ENLACE", "", "TEXTO"],
autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 600,
oninit:function(){
},
onslide:function(curslide, i){
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
})
</script>
<div id="simplegallery1"></div>

Ahora debes reemplazar en cada línea URL IMAGEN con la dirección de tu imagen [+], ENLACE con la dirección de la web, blog o artículo al que conducirá dicha imagen y TEXTO con el término o la frase que actuará como título al pasar el cursor / mouse.

Si deseas añadir más imágenes, utiliza líneas como esta:

["URL IMAGEN", "ENLACE", "", "TEXTO"],

No olvides incluir la coma al final de la llave de cierre para separar cada imagen.

Guarda el gadget y arrástralo hasta el lugar que desees. Si necesitas cualquier tipo de ayuda avísame.

Driwrgy dice...

Jaime, una pregunta, se copian separadas por -,-tanto la url de imágen, de enlace y el texto pero SIN necesidad de copiar todo el código? O copiando el código cada vez que quieras introducir una url, enlace y texto nuevos, separado por -,-? Ayhs, qué lio! Imagino que lo primero, no? Gracias por tu ayuda.

Jaime Trujillo Escobedo dice...

Driwrgy, tan solo necesitarás copiar la línea, el código tan solo necesita incluirse una vez.

Elisa dice...

Hola Jaime,
Gracias por tu visita, por tu comentario, y por compartir tus recuerdos de Londres.
Sobre el particular, hace sólo un par de meses que descubrí esta aplicación. Es fantástica
Saludos desde Argentina
Elisa

Jaime Trujillo Escobedo dice...

Ha sido un placer comentar en tu blog, Elisa. Me alegra que estés entre nosotros aquí en blogger.

¡Abrazos desde España!

Isaac Chavero dice...

Muy bueno y sencillo. ¿tienes pensado publicar un slideshow de mayor tamaño? Por ejemplo para ponerlo en la página de inicio antes de las entradas

Jaime Trujillo Escobedo dice...

Por supuesto, Isaac Chavero. Tengo una galería muy atractiva y sencilla de utilizar / administrar preparada. En breve podrás disfrutar de ella.

Mª Angeles dice...

Hola, me gusta tu blog es de gran ayuda.
esta galeria es la que estaba buscando pero soy un poco torpe y no me aclaro para poner los enlaces podrias ayudarme y decirme lo que poner en cada sitio? te lo agradeceré pues he hecho muchas pruebas y no doy con la solución que seguro es facilisima.

Gracias de antemano por tu ayuda.

Jaime Trujillo Escobedo dice...

¡Bienvenida Mª Angeles! Te explico. Los enlaces que tendrán las imagenes se incluyen entre las dos comillas (" y "), borrando antes el término "ENLACE".

Donde dice URL DE LA IMAGEN debes incluir la dirección de la fotografía (en esta entrada te explico como obtenerla).

La palabra TEXTO también debe editarse. Bórrala e incluye una frase que describa la imagen. Ten en cuenta que cada línea representa un elemento, una foto.

Si tienes alguna otra duda házmelo saber.

akontraluz dice...

Gracias por atender mi consulta, pero sigo sin conseguir que me funcione, es como si no añadiese nada, he seguido tus pasos que yo ya lo habia hecho asi en un principio pero nada, nop hay forma, la verdad no se que mas puedo hacer. Tiene algo que ver el tamaño de las fotos?

si se te ocurre que puedo hacer te lo agradeceria.

Jaime Trujillo Escobedo dice...

Akontraluz, he intentado determinar el problema pero aún no he dado con una solución. Permíteme revisar el código de la galería en mi blog de pruebas.

Tal vez te pueda interesar este otro truco, como una galería 'provisional', hasta que de con el error.

Frankie dice...

Hola, me pregunto si podre pone el codigo en una entrada de mi blog y si evo agregarle algo mas o no.

Jaime Trujillo Escobedo dice...

En una entrada no funcionará correctamente, Gagach, aunque siempre puedes hacer la prueba. Si necesitas cualquier otra cosa avísame.

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