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.
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.
¿Problemas al comentar? Utiliza 
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.
Driwrgy, tan solo necesitarás copiar la línea, el código tan solo necesita incluirse una vez.
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
Ha sido un placer comentar en tu blog, Elisa. Me alegra que estés entre nosotros aquí en blogger.
¡Abrazos desde España!
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
Por supuesto, Isaac Chavero. Tengo una galería muy atractiva y sencilla de utilizar / administrar preparada. En breve podrás disfrutar de ella.
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.
¡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.
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.
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.
Hola, me pregunto si podre pone el codigo en una entrada de mi blog y si evo agregarle algo mas o no.
En una entrada no funcionará correctamente, Gagach, aunque siempre puedes hacer la prueba. Si necesitas cualquier otra cosa avísame.