Creando slideshows con AJAX Feed API

Hace ya tiempo, Carlos, de Rincón del mar, me recomendaba leer una serie de páginas donde se mostraba una forma de utilizar las APIs de Google para crear slideshows con las imágenes alojadas en cualquier servicio que posea feeds como Picasa o Photobucket.

Todo es posible gracias al AJAX Feed API que permite leer cualquier feed RSS o Atom utilizando JavaScript (más información).

Esto nos abría una serie de posibilidades bastante sencillas de implementar ya que hay un wizard donde podemos hacerlo de manera más o menos automática.

El slideshow usa el mismo criterio y hay mucha información al respecto en la página con referencias pero, veamos los más sencillo.

Primero, necesitamos el script que llamamos desde la plantilla, 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>

Un detalle a tener en cuenta es que si ya empleamos el cargador de Google para otras cosas, la primera línea es innecesaria.

Luego, necesitamos colocar un DIV con un ID que es el lugar donde se mostrará:

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

Por último, agregamos el script con los parámetros del control:

<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>

¿Cómo podemos configurarlo? Utilizando la variable options, agregando parámetros separados con comas. Allí podemos
establecer:

• 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

Hay muchas más y el código completo de un ejemplo que podemos ver acá.