Corsi on-line

Ajax SlideShow con GFSlideShow

In questo post vi segnalo un interessante soluzione Ajax (basata sulle Google Ajax Feed API) per generare uno slideshow d’immagini estratte automaticamente dai feed RSS da servizi online come Photobucket, Flickr e Picassa Web Album.
Per integrare GFSlideShow nelle vostre pagine è sufficiente seguire pochi e semplici step:

1. Includere (nell’header della pagina) i riferimenti alle Google API:

<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. Aggiungere (nel <body> della pagina) l’elemento contenitore:

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

3. Un pizzico di CSS non guasta mai:

#slideShow {
   width : 160px;
   height : 160px;
   padding : 10px;
}

4. Aggiungere il codice Javascript che crea lo slideshow:

<script type="text/javascript">
  // questa è la funzione che controlla lo slideshow
  function LoadSlideShow() {
    // URL del feed da cui estrarre le immagini
    var feed  = "http://feed.photobucket.com/images/sunsets/feed.rss";
    // definisco un po' di opzioni
    var options = {displayTime:2000, transistionTime:600, scaleImages:true};
    // istanzio l'oggetto passandogli il feed, l'ID del contenitore e le opzioni
    var ss = new GFslideShow(feed, "slideShow", options);
  }

  // carico le Ajax Feed API
  google.load("feeds", "1");

  // al caricamento della pagina lancio la funzione LoadSlideShow
  google.setOnLoadCallback(LoadSlideShow);
</script>

L’elenco completo delle opzioni disponibili è disponibile nella pagina della documentazione ufficiale.

Per vedere l’esempio prodotto dal codice qui sopra clicca qui.

Post correlati
  • Ciao, grazie per la guida, ho inserito uno slideshow di 3 banner sopra un testo.

    Funziona ma al fade out di una immagine pare che si sposti sotto per poi ritornar su con la nuova? sbaglio qualcosa?

I più letti del mese
Tematiche