Cómo programar una presentación de fotos con Google Ajax Feed API

La semana pasada, les presentaba una solución para insertar un álbum de fotos de Picasa/Photobucket en tu sitio web y que funcione sin flash, mediante un servicio llamado SlideMyPics. Pero si no quieres depender de nadie, puedes hacerlo mediante programación de la siguiente manera:

Utilizarás la API de Google que mediante AJAX ( Asynchronous JavaScript And XML) que te permite generar desarrollo web para crear aplicaciones interactivas o RIA. Estas aplicaciones se ejecutan en el cliente,o sea, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano.

Google nos facilita varios scripts que ya están pre-configurados.

Deberás anexar entre las etqiuetas del <header> </header> los siguientes códigos, como así también, enlazar una hoja de estilos CSS donde ubicar algunos elementos.

Son sólo 3 pasos:

Paso 1 – Cargar el AJAX Feed API y la Presentacion de las diapositivas ( enlace RSS del album) Copia y pega el siguiente script en una página o en un template de tu Blog

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

Paso 2 – Define de donde ubicarás tus fotos en la página, para lo cual definimos una etiqueta <div>

<div id="slideShow">Loading...</div>

Agregar una hoja de estilos.css , con las siguientes etiquetas

#slideShow {
  width : 288px;
  height : 192px;
  padding : 10px;
}

Paso 3 – Crear un objeto GFslideShow que enlace a tus fotos

Esta parte de código, configura os controles para la presentación de diapositivas, el llamado de inicialización y el uso de las otras funciones, como  google.setOnLoadCallback()  que generan la ejecución del código:

El siguiente snippet, muestra el correcto uso de as funciones google.setOnLoadCallback() y LoadSlideShow con la cual crearemos esta simple presentación de fotos.

<script type="text/javascript">
  function LoadSlideShow() {
    var feed  = "http://feed.photobucket.com/images/sunsets/feed.rss";
    var options = {displayTime:2000, transistionTime:600, scaleImages:true};
    var ss = new GFslideShow(feed, "slideShow", options);
  }
  /**
   * Use google.load() to load the AJAX Feeds API
   * Use google.setOnLoadCallback() to call LoadSlideShow once the page loads
   */
  google.load("feeds", "1");
  google.setOnLoadCallback(LoadSlideShow);
</script>

Puedes ver el resultado, en esta página de prueba

Puedes mirar más parámetros de configuración en la fuente al pie del artículo.

[fuente: Google Code ]