SlideShow, transición de imágenes de Picasa

Hace poco cree un nuevo blog para compartir frases que me gusten y quería que ademas de frases se muestren imágenes del autor de la misma, y encontré una forma bastante linda y fácil, se le agrega una dirección feed donde estén las imágenes y listo se ve algo asi:

Cargando ...


Para usarlo hay que hacer esto:

Primero, necesitamos el script que llamamos desde la plantilla (antes del /head), desde un post o desde algún elemento HTML  que agregamos. En todos los casos, escribimos:

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js" type="text/javascript"></script>


Segundo,  en el post o donde se quiera poner el cuadro, hay que implementar  un DIV con un ID, el ID es para diferenciarlo si usamos varios en la misma página.
Tercero, agregar la llamada al script, con todas las opciones. Esto se puede agregar junto con el DIV o en otra parte, el cuadro se muestra donde esta el DIV.


El código para usarlo sería algo asi:

<div id="slideShow" style="width:160px;height:160px;">Cargando ...</div>

<script type="text/javascript">
  function LoadSlideShow() {
    var feed  = "URL_delFeed";
    var options = {displayTime:2000, transistionTime:600, scaleImages:true};
    var ss = new GFslideShow(feed, "slideShow", options);
  }
  google.load("feeds", "1");
  google.setOnLoadCallback(LoadSlideShow);
</script>


Yo uso el Feed que te da la web de Picassa, ya que uso el software de Picassa para subir las imágenes.
Antes de usarlo, si se quiere se puede configurar el slideshow para personalizarlo un poco, en la web de google se explican todas las opciones pero está en inglés, si querés y no sabes inglés podes intentar leer la versión traducida.
algunas de las opciones (se agregan separadas con coma  en 'var options') son:

  • la cantidad de imágenes: numResults:cantidad
  • mantener o no la relación ancho/alto: scaleImages:true|false (por defecto es true)
  • o bien maintainAspectRatio:true|false
  • el tiempo que permanecen visibles: displayTime:valor (en milisegundos, por defecto 3000)
  • el tiempo que dura la transición: transitionTime:valor (en milisegundos, por defecto 1000)
  • transformar o no las imágenes en enlaces: linkTarget:google.feeds.LINK_TARGET_BLANK (por defecto no)
  • habilitar o deshabilitar pausa con mouseover: pauseOnHover:true|false (por defecto es true)
  • habilitar panel de control: fullControlPanel:true
  • panel de control con íconos pequeños: fullControlPanelSmallIcons:true
El tamaño de las miniaturas puede establecerse con estas opciones:
  • thumbnailSize: GFslideShow.THUMBNAILS_SMALL
  • thumbnailSize: GFslideShow.THUMBNAILS_MEDIUM
  • thumbnailSize: GFslideShow.THUMBNAILS_LARGE
Fuente: Vagabundia

gestor tareas dijo...

Me encanta encontrar un blog que te de truquillos para utilizar con blogger.
Casi todo lo que se ve en la red, está más encaminado a wordpress, del que si que encuentras muchísima info.

Uno mas del monton dijo...

Gracias ^^ espero que sirva, lo malo es que muchas cosas no las posteo de vago, podria hacer mas entradas, si le dedicara un poco mas de tiempo :p.


Otra cosa nada q ver:
Me acabo de dar cuenta que blogger no acepta mas dominos sin www!! no puedo usar mas como usaba antes los .com.ar

q onda esto? voy a tener q buscar porque no tiene sentido, los blogs q tengo como este andan pero el q hice nuevo no me deja hacer lo mismo.. vamos a ver q hago, ahi ahora se ve porque volvi a blogspot.com pero yo quiero con .com.ar :(, si lo soluciono tambien posteo como se hace.. espero que no nos saquen esa chance.

Anónimo dijo...

MUY BUENO LO ESTABA BUSCANDO GRACIAS POR EL APORTE!!!

carlos dijo...

tu explicacion esta muy compleja deberias colocar imagenes del proceso con fotos del blog con los pasos a seguir muchos desconecen donde colocar los codigos y tampoco saben si no colocas imagenes. pa la proxima no pienses que todos saben de blog att ccc

Uno mas del monton dijo...

Gracias por comentarlo, la próxima vez voy a tratar de explicarlo mas sencillo que es en escencia como quería que sea el blog en un principio, pero luego por vagueza uno escribe mas rápido y no se dedica a explicarlo mejor.. es todo una cuestión de ganas y de tiempo.

Colegio 776 dijo...

Gracias! es lo que andaba buscando

DELINEANT.ES dijo...

Muy bueno el post.
Pero sabrías poner las diapositivas en reproducción aleatoria?.
En el link que pones de google no lo encontré. Mil gracias y felicidades.
Adolfo.

Deja aqui tu comentario

Siguiente Anterior Ir a página principal

LinkWithin

Related Posts with Thumbnails

Blogger Template by Blogcrowds

 
ir arriba