Adding the control is a simple three step process (alternatively, you can always start with "hello world" starter and then customize the resulting code.)
Step 1 - Load AJAX Feed API and the Dynamic Feed Control
The first step is to load the Google AJAX Feed API and the Dynamic Feed Control code into your application. 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, add the following two lines of code to your page or blog template.
<script src="http://www.google.com/jsapi/?key=YOUR-KEY"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
type="text/javascript"></script>
Step 2 - Define a location on your page for the Dynamic Feed Control
The next step is to define a place on your page for the slideshow. This will typicall be a div element. Note, you can have more than one Slide Show on your page.
<div id="feedControl">Loading...</div>
You should set a width and height styling attribute. You can also set other styling attributes on this element such as padding, borders, etc. For example, a style rule like this might be useful.
#feedControl {
width : 360px;
height : 160px;
padding : 10px;
}
Step 3 - Create a GFdynamicFeedControl and bind it to your page
The final step involves creating and configuring the Dynamic Feed Control. The first step of this process is to actually get your code to run and load the AJAX Feed API. The easiest way to do this is to write a simple function to initialize your Slide Show, and then use google.setOnLoadCallback() to cause your code to execute.
The code snippet below demonstrates the correct use of google.setOnLoadCallback() as well as the target function (loadFeedControl) that creates and configures a simple Dynamic Feed Control.
<script type="text/javascript">
function loadFeedControl() {
var feed = "http://rss.people.com/web/people/rss/topheadlines/index.xml";
var fg = new GFdynamicFeedControl(feed, "feedControl");
}
/**
* Use google.load() to load the AJAX Feeds API
* Use google.setOnLoadCallback() to call loadFeedControl once the page loads
*/
google.load("feeds", "1");
google.setOnLoadCallback(loadFeedControl);
</script>
Customizing the Dynamic Feed Control and Other Advanced Features
The Slide Show contains a number of options that you can control.
* Number of Results
* Display Time
* Fadeout Time
* Disabling Scroll on Fadeout
* Linking Entries
* Disabling Pause on Hover
* Horizontal Mode
* Stacked Vertical Mode
* Static Titles
* Entry Transition, Feed Transition, and Feed Load Callbacks
* Advanced Styling with CSS
Number of Images
The default number of entries to be displayed will be GFdynamicFeedControl.DEFAULT_NUM_RESULTS. Currently this number is 4. You can control this by using the numResults property of options. The following snippet demonstrates this.
<script type="text/javascript">
var options = {
numResults : 8
}
new GFdynamicFeedControl(feed, "feedControl", options);
</script>
Display Time
By default, entries are displayed for GFdynamicFeedControl.DEFAULT_DISPLAY_TIME milliseconds (approximately 5 seconds). To control how long entries are displayed, utilize the displayTime property of options.. The following snippet demonstrates this.
<script type="text/javascript">
var options = {
numResults : 16,
displayTime : 5000
}
new GFdynamicFeedControl(feed, "feedControl", options);
</script>
Fadeout Time
By default, after entries have been displayed for displayTime, the next entry will be transitioned into view. The default value for the transition is GFdynamicFeedControl.DEFAULT_FADEOUT_TIME milliseconds (approximately 1 second). To control how long transitions take, utilize the fadeOutTime property of options. Note that a fadeOutTime of 0 suppresses transitions. The following snippet demonstrates this.
<script type="text/javascript">
var options = {
numResults : 16,
displayTime : 5000,
fadeOutTime : 500
}
new GFdynamicFeedControl(feed, "feedControl", options);
</script>
Disabling Scroll on Fadeout
By default, after entries have been displayed for displayTime, the next entry will be transitioned into view. As part of this transition the entry scrolls downward as well as fades out. To control this behavior, utilize the scrollOnFadeOut property of options. The following snippet demonstrates this.
<script type="text/javascript">
var options = {
numResults : 16,
displayTime : 5000,
fadeOutTime : 500,
scrollOnFadeOut : false
}
new GFdynamicFeedControl(feed, "feedControl", options);
</script>
Linking Entries
By default, entries are linked to their source. If you want to link the the source url provided in the feed to something different, utilize the linkTarget property of options. The option takes a string and will be used to specify the link target of the image. The Google Feeds API has defined some useful shortcuts for use here. The following snippet demonstrates this.
<script type="text/javascript">
var options = {
numResults : 16,
displayTime : 5000,
linkTarget : google.feeds.LINK_TARGET_BLANK
}
new GFdynamicFeedControl(feed, "feedControl", options);
</script>
Disabling Pause on Hover
By default, entries will pause when the mouse hovers over them, allowing the user to get a closer look if they wish. In additiona, hovering over the list in vertical mode will select the entry. You can control this behavior using the pauseOnHover property of options. The following snippet demonstrates this.
<script type="text/javascript">
var options = {
linkTarget : google.feeds.LINK_TARGET_BLANK,
pauseOnHover : false
}
new GFdynamicFeedControl(feed, "feedControl", options);
</script>
Horizontal Mode
By default, the Dynamic Feed Control will be displayed in vertical mode. However, horizontal mode, as seen on the sample page, can be selected by using the horizontal property of options. The following snippet demonstrates this.
<script type="text/javascript">
var options = {
linkTarget : google.feeds.LINK_TARGET_BLANK,
pauseOnHover : false,
horizontal : true
}
new GFdynamicFeedControl(feed, "feedControlHorizontal", options);
</script>
Stacked Vertical Mode
By default, the Dynamic Feed Control will be displayed in vertical mode. When multiple feeds are added to the control, the default vertical mode will flip a single list between all result sets. The stacked vertical mode will stack all the results sets on top of each other so that they are all visible. This mode can be selected by using the stacked property of options. The following snippet demonstrates this.
<script type="text/javascript">
var options = {
linkTarget : google.feeds.LINK_TARGET_BLANK,
pauseOnHover : false,
stacked : true
}
new GFdynamicFeedControl(feeds, "feedControlHorizontal", options);
</script>
Static Titles
By default, the Dynamic Feed Control will set the title dynamically based on the feed's title, or as an override from the feed description passed in. If you want to set a static title, similar to the stacked vertical mode examples, you can use the title property of options. The following snippet demonstrates this.
<script type="text/javascript">
var options = {
linkTarget : google.feeds.LINK_TARGET_BLANK,
pauseOnHover : false,
stacked : true,
title : 'Hollywood'
}
new GFdynamicFeedControl(feeds, "feedControlHorizontal", options);
</script>
Entry Transition, Feed Transition, and Feed Load Callbacks
The Dynamic Feed Control supports a number of callbacks which your application can use to alter its behavior and react to whats going on in the Dynamic Feed Control. All of this is easy to setup using the callbacks.
The Dynamic Feed Control supports the following callbacks which are all requested by setting properties on options.
* transitionCallback - This callback allows you to specify a method that is called each time the Dynamic Feed Control transitions to a new entry. Your method is passed the entry.
* feedLoadCallback - This callback allows you to specify a method that is called when the associated feed load completes. Your method is passed the result which you should check for errors. By calling you here, you are given the opportunity to extract and make use of the feed title, link, and other feed or entry properties.
* feedTransitionCallback - This callback allows you to specify a method that is called when the Dynamic Feed Control switches between multiple feeds.
The following snippets demonstrate these callbacks.
transitionCallback
<script type="text/javascript">
/**
* transition callback
*/
var options = {
transitionCallback : myTransitionHandler
}
new GFdynamicFeedControl(feed, "feedControl", options);
/**
* Place the title of the entry under the image
*/
function myTransitionHandler(entry) {
titleSpan.innerHTML = entry.title;
}
</script>
feedLoadCallback
<script type="text/javascript">
/**
* feed loaded callback
*/
var options = {
feedLoadCallback : myFeedLoadHandler
}
new GFdynamicFeedControl(feed, "feedControl", options);
/**
* Place the feed title above the container
*/
function myFeedLoadHandler(result) {
if ( result.error ) {
alert("feed load failed");
} else {
feedTitleSpan.innerHTML = result.feed.title;
}
}
</script>
feedTransitionCallback
<script type="text/javascript">
/**
* feed transition callback
*/
var options = {
feedTransitionCallback : myFeedTransitionHandler
}
new GFdynamicFeedControl(feed, "feedControl", options);
/**
* Place the feed title above the container as the feed switches.
*/
function myFeedTransitionHandler(result) {
if ( result.error ) {
alert("feed load failed");
} else {
feedTitleSpan.innerHTML = result.feed.title;
}
}
</script>
Advanced Styling with CSS
If you are an advanced user and want to experiment with the css scheme of the Dynamic Feed Control, we receommend taking a look at the css file for detailed information. The CSS styling file can be found here, gfdynamicfeedcontrol.css. The following section contains some of the prominent classes.
/* Root */
.gfg-root
/* Feed Title */
.gfg-title
/* Entry Section - Note the contents are generated from the
FeedControl, see documentation or the css here to style.
*/
.gfg-entry
/* Feed List */
.gfg-list
/* List Entries, support highlighting, and odd and even behaviors */
.gfg-listentry
.gfg-listentry-highlight
.gfg-listentry-odd
.gfg-listentry-even
/* For horizontal mode, the root is replaced with the following class.
All other changes are styled against the classes above.
*/
.gfg-horizontal-root
The "Hello World" of the Dynamic Feed Control
The following page demonstrates a complete page which uses the Dynamic Feed Control. You can start with this simple page, change YOUR-KEY to the value of your key and be up and running in seconds.
Warning: Make sure you signup for your own key. Do not use the key value of "YOUR-KEY" on your pages.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Google AJAX Feed API - AJAX Slide Show Sample</title>
<script src="http://www.google.com/jsapi/?key=YOUR-KEY"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
#feedControl {
margin-top : 20px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 16px;
color: #9CADD0;
}
</style>
<script type="text/javascript">
function load() {
var feed ="http://rss.people.com/web/people/rss/topheadlines/index.xml";
new GFdynamicFeedControl(feed, "feedControl");
}
google.load("feeds", "1");
google.setOnLoadCallback(load);
</script>
</head>
<body>
<div id="body">
<div id="feedControl">Loading...</div>
</div>
</body>
</html> Label: Dynamic Feed
Tidak ada komentar:
Posting Komentar