thoughts on Web Design and Web Application Development

Make Slide Show with Google AJAX Feed API

June 26th, 2007 by          
Vote This Post DownVote This Post Up (No Ratings Yet)
Loading ... Loading ...

 

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.

 

 

Posted in AJAX, Google | Check Comments No Comments » |

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.

Blogge - Web Design Blog hosted by Web Design India