Google's AJAX Photo Slide Show

Tagged:  

Need a image slideshow to show off your Flickr, Picasa, PhotoBucket, or other photos?

Check out the new release of Google's AJAX Slide Show.
http://www.google.com/uds/solutions/slideshow/

Google API

Last month google released an update to their AJAX Slide Show application, created using their AJAX Feed API.

New in this release are:

  • The Full Control Panel
    This will give you a pause/play button, as well as forward and previous controls. The Full Control Panel will fade in and out on mouse events. The Full Control Panel will also auto-fade out when the mouse does not move for some period of time.
  • Animation and Pause Callbacks
    The Slide Show supports a number of callbacks which your application can use to alter its behavior and react to whats going on in the slide show. For instance, you might have a custom feed which requires that you compute the url of the image for an entry, or you might want to alter the click behavior to play an embedded movie when someone clicks on an image (instead of following a hyperlink). All of this is easy to setup using the Slide Show callbacks.
  • Position Bias for Images and Controls
    By default the Slide Show is configured to center the images to be displayed. It also automatically positions the controls, such as the pause image, approximately on the bottom 1/3 of the Slide Show. As an application, you can provide position bias to images, controls, or both, using the centerBias and pauseCenterBias properties of options. Bias is expressed as an object with topBias and leftBias, both expressed as offsets in pixels.

Here's an example slide show from Google's site:

Here's the link to the Slideshow homepage.

And the here's the link to the Programming Guide with sample code to get you on your way to building you're slideshow.

I have been trying to make sense of the instructions of how to incorporate the gogle slide show facility onto our website, but I am getting nowhere with it despite the instructions being made to look very simple.
How do I initially "The first step is to load the Google AJAX Feed API and the Slide Show code into your application"

The rest seems straight forward though I cannot see where or to what to add the Ajax feed to.

Could some brighter spark help me out on this please?

Chris.

Hi Chris,

Have you included these two <script> elements to the <HEAD> section of your page?

Load the Google AJAX Feed API
<script src="http://www.google.com/jsapi/?key=[YOUR GOOGLE AJAX FEED API KEY]" type="text/javascript"></script>

Load the Google Slide Show code
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
type="text/javascript"></script>

You'll need to make sure these are both in your page before following the rest of the example.

Let me know if you run into any issues.

Mark

it's v good
but how i can put my own photo

So how does one get their own photos in there?

Google AJAX Feed API - AJAX Slide Show Sample

.gss a img {border : none;}
.gss {
width: 288px;
height: 216px;
color: #dddddd;
background-color: #000000;
padding: 8px;
}

function load() {
var samples = "http://dlc0421.googlepages.com/gfss.rss";
var options = {
displayTime: 2000,
transistionTime: 600,
linkTarget : google.feeds.LINK_TARGET_BLANK
};
new GFslideShow(samples, "slideshow", options);

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

Loading...

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Copy the characters (respecting upper/lower case) from the image.