Crear un SlideShow con un Feed

Hay un widget muy interesante para mostrar feeds a través de palabras clave; indicamos una palabra y nos dará todas las noticias que encuentre con esa palabra. Esto se puede hacer con Google Ajax Feed API. Sin duda es un recurso muy interesante para mostrar en nuestro blog las últimas noticias relacionadas de forma automática. Probablemente hayas visto este recurso más de una vez, e incluso es probable que lo estés utilizando en alguna de sus diversas variantes.

Pero además se pueden conseguir aplicaciones más interesantes que las habituales, utilizando este sistema de lector de feeds. Una de ellas es crear un SlideShow que mostrará nuestra colección de fotos de forma automática. De fácil instalación en cualquier web, y con muy poco esfuerzo. Solo necesitarás tener las fotos que quieres mostrar en un servicio de almacenamiento de imágenes que soporte Feeds como Picasa o PhotoBucket. Puedes comprobar el efecto conseguido con este SlideShow. Veamos como hacerlo sin consumir recursos y tiempo;

1.- Primero necesitamos llamar a las librerías que vamos a utilizar. Utilizaremos las librerías ubicadas en los servidores de Google de forma pública para no tener que instalar nada. Para esto escribimos en el head de nuestra plantilla las siguientes líneas de código:

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

2.- A continuación introducimos en el body el código que servirá para mostrar las fotos en nuestra web.

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

3.- Por último añadimos el código javascript en cualquier parte del código HTML de nuestra Web.

<script type="text/javascript">

function LoadSlideShow() {

var feed = "Tu_URL_del_Feed";

var options = {displayTime:2000, transistionTime:600, scaleImages:true};

var ss = new GFslideShow(feed, "slideShow", options);

}

google.load("feeds", "1");

google.setOnLoadCallback(LoadSlideShow);

</script>

Debemos de cambiar la linea que dice var feed = "Tu_URL_del_Feed"; por la dirección URL del feed de nuestras fotos. Sirva como ejemplo el mismo código con la línea modificada:

<script type="text/javascript">

function load() {

var samples = "http://www.google.com/uds/solutions/slideshow/sample.rss";

var options = {

displayTime: 2000,

transistionTime: 600,

linkTarget : google.feeds.LINK_TARGET_BLANK

};

new GFslideShow(samples, "slideshow", options);

}

google.load("feeds", "1");

google.setOnLoadCallback(load);

</script>

Podemos configurar este último código con algunas variables para que muestre las fotos de forma personalizadas a nuestros requisitos. Por ejemplo se pueden configurar a partir de la variable options (agregándole parámetros separados con comas) los siguientes puntos...

• cantidad de imágenes con numResults:cantidad
  
• tiempo de duración de la transición con transitionTime:valor (en milisegundos)
  
• tiempo que se muestran las imágenes con displayTime:valor (en milisegundos)
  
• relación ancho/alto: scaleImages:true | false o con maintainAspectRatio:true | false
  

y otras muchas variables configurables que puedes consultar en la documentación. Funciona de forma muy simple de instalar, y no consume recursos. Una buena forma de hacer un SlideShow.

Para más información podeis consultar aquí, o ver el efecto conseguido aquí.