using Google AJAX Feed API to create your own Slide Show
Running ...


Google AJAX Feed API


  • With the Google AJAX Feed API, you can download any public Atom or RSS feed using only JavaScript, so you can easily mash up feeds with your content. Media RSS allow you to display video or photo.
  • The Slide Show is a simple to use application of the Google AJAX Feed API that is designed to let you add photo slide shows to your GPC pages. The slide show control takes photo feeds from all major host such as PhotoBucket, Flickr, Picasa and Yahoo.
  • Any feeds that use Media RSS can be used without customization
  • Integrating the AJAX Library into your code :


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



Feed from Flickr


  • Open Flickr, Log and click on Your photos
  • Search the Feed button, on the bottom :


Feed Button


  • Copy the address, you should have something like this :


http://api.flickr.com/services/feeds/photos_public.gne
?id=42038249@N00&lang=en-us&format=rss_200


  • 42038249@n00 is the user id
  • You can also use IdGettr to find your Flickr user or group id. Just enter the address of your photostream or group pool and it'll find the number for you.



Feed from Picasa


  • Open Picasa, click on an album
  • On the bottom right search for RSS, and copy the address

http://picasaweb.google.fr/data/feed/base/user/philippe.chappuis/
albumid/5008507738518598193
?kind=photo&alt=rss&authkey=3wuzt3CsXf0&hl=fr



Feed from Photobucket


  • Open Photobucket, click on an album
  • Search the Feed button, on the bottom, labeled album feed :


Feed Button


  • Copy the address, you should have something like this :


http://feed266.photobucket.com/albums/ii244/prac53/feed.rss



Feed from Yahoo News


  • Open Yahoo News, choose the subject, and copy the address of the RSS button.

http://us.lrd.yahoo.com/_ylt=AqgiuWZqVGjhoKnLy0yGN.ZzWMcF/
SIG=119kvhr0a/**http://rss.news.yahoo.com/imgrss/832

  • Save the last part of the address :

http://rss.news.yahoo.com/imgrss/832



How to Define the Slide Show


  • Define a callback function for your Slide Show. Choose the right parameters using the Programming Guide

<script type="text/javascript">

function load_wine_estate()
{
var feed_photobucket = "http://feed266.photobucket.com/
albums/ii244/prac53/feed.rss";

var options = {
fullControlPanel: true,
fullControlPanelSmallIcons: true,
thumbnailSize : GFslideShow.THUMBNAILS_LARGE,
pauseOnHover: true,
displayTime: 3000,
transitionTime: 1000,
linkTarget : google.feeds.LINK_TARGET_BLANK
};

new GFslideShow(feed_photobucket, "wine_estate", options);
}

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

</script>

  • In the html, insert this line, the div block will contain the Slide Show :

<div id="wine_estate" class="gss_wine_estate">Loading pictures...</div>


  • To define the look of the Slide Show, define the CSS for the class gss_wine_estate


.gss_wine_estate a img
{
border : none;
}

.gss_wine_estate
{
width: 458px;
height: 412px;
color: #dddddd;
background-color: #c3d9ff;
border: 1px solid red;
padding: 4px;
}


  • Badly Photobucket send inside the feed a thumbnail which is too small for my need (160 x 107). As the name of the pictures are prefixed with th_ it's easy to write a hook :


function GetURLFullSize(entry)
{

var content = entry.content;
var start = content.indexOf("<img src=")+10;
var stop = content.indexOf(".jpg",start)+4;
var thumburl = content.substring(start,stop);

thumburl=thumburl.replace("th_","");

return(thumburl);
}


  • Just not forget to add the name of the hook to the options


thumbnailUrlResolver : GetURLFullSize


Loading pictures...

Copyright : Regis Columbo and Clos Domaines et Châteaux



Example from Picasa


  • Define a callback function with the album to show

<script type="text/javascript">

function load_picasa()
{
var feed_picasa = "http://picasaweb.google.fr/data/
feed/base/user/philippe.chappuis/
albumid/5008507738518598193?kind=photo&
alt=rss&authkey=3wuzt3CsXf0&hl=fr";

var options = {
fullControlPanel: true,
fullControlPanelSmallIcons: true,
thumbnailSize : GFslideShow.THUMBNAILS_LARGE,
pauseOnHover: true,
displayTime: 3000,
transitionTime: 1000,
linkTarget : google.feeds.LINK_TARGET_BLANK,
feedLoadCallback: FeedTitle,
transitionCallback: TransitionHandler
};

new GFslideShow(feed_picasa, "album_tendance9", options);
}

/* Find the title of the Feed */
function FeedTitle(result)
{ if ( result.error ) { alert("Error : Feed load failed"); }
else
{
if (document.getElementById)
{
document.getElementById("feed_title").innerHTML = result.feed.title;
}
else if (document.all)
{
document.all["feed_title"].inner = result.feed.title;
}
}
}
/* Find title of each picture */
function TransitionHandler(entry, transitionTime)
{
if (document.getElementById)
{document.getElementById("image_title").innerHTML =
entry.title; }
else
if (document.all)
{document.all["image_title"].innerHTML = entry.title; }
}

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

</script>
  • Note I add two hooks, one to find the title of the feed (feedLoadCallback), and another one (transitionCallback) to change the title of the picture, after each transition
  • In the html, insert this line, the div block will contain the Slide Show :

<div style="text-align: center; color: red;" id="feed_title"></div>

<div id="album_tendance9" class="gss_small">Loading pictures...</div>

<div style="text-align: center; color: red; font-weight: bold;" id="image_title"></div>


  • Define the CSS for the class gss_small


.gss_small a img
{
border : none;
}

.gss_small
{
width: 229px;
height: 206px;
color: #dddddd;
background-color: #c3d9ff;
border: 1px solid red;
padding: 4px;
}



Loading pictures...

Copyright : tendance9 Light Wine


  • I create a Google Gadget with the above code. The Slideshow display the title of the feed and the legend of every picture



Yahoo News


  • Define a callback function with the news feed to show

<script type="text/javascript">

function load_yahoo()
{
var feed_yahoo = "http://rss.news.yahoo.com/imgrss/832";

var options = {
fullControlPanel: true,
fullControlPanelSmallIcons: true,
thumbnailSize : GFslideShow.THUMBNAILS_LARGE,
pauseOnHover: true,
displayTime: 3000,
transitionTime: 1000,
linkTarget : google.feeds.LINK_TARGET_BLANK,
thumbnailUrlResolver : UrlYahoo
};

function UrlYahoo(entry) {

var content = entry.content;
var start = content.indexOf("src=")+5;
var stop = content.indexOf(".jpg?",start)+4;
var thumburl = content.substring(start,stop);
return(thumburl); }

new GFslideShow(feed_yahoo, "yahoo_science", options);
}

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

</script>




  • I add a hook to change the URL of the feed. Very strange, but Yahoo doesn't follow their own recommendations.
  • In the html, insert this line, the div block will contain the Slide Show :

<div id="yahoo_science" class="gss_small">Loading pictures...</div>


Loading pictures...

Copyright : Yahoo News



Scaling Images


  • By default, images are not scaled within the containing element. The Slide Show control will create a containing div element that will hide overflows.
  • To have the Slide Show control to scale your images, utilize the scaleImages property of options (remove the comma if scaleimage is the last option) :

scaleImages : true,



More Informations






One Day - One Label - One Wine