On 16th April 2007, morning Google launched the Google AJAX Feed API, an API that takes the pain out of developing mashups in JavaScript. Now you can mash up feeds using only a few lines of JavaScript rather than dealing with complex server-side proxies.
Step 1
Copy and Paste below Google AJAX Feed API and the Slide Show code between “<HEAD> … </HEAD>”. If you don’t already have a Google AJAX Feed API key, your first step is to sign up for a key. With your key in hand, change “YOUR-KEY” with your google ajax api key.
<style type=”text/css”>
#slideShow {
width : 160px;
height : 160px;
padding : 10px;
border:#000033 solid 4px;
}
</style>
<script src=”http://www.google.com/jsapi/?key=YOUR-KEY”
type=”text/javascript”></script>
<script src=”http://www.google.com/uds/solutions/slideshow/gfslideshow.js”
type=”text/javascript”></script>
<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 LoadTuneBar once the page loads
*/
google.load(”feeds”, “1″);
google.setOnLoadCallback(LoadSlideShow);
</script>
Step 2
Add below code on your page between “<BODY> … </BODY>” for the Slide Show.
<div id=”slideShow”>Loading…</div>
Note: You may change “var feed” with your PhotoBucket, Flickr, or Picasa Web Albums rss feed.
Click Here for DEMO
Feel free to try this on one of your own pages or on your blog.
|