jundolor

Friday, April 10, 2009

Using the AJAX Slide Show

The AJAX slide show from Google is quite a useful utility in creating a running photo gallery for web pages. Its all a matter of incorporating the AJAX code into HTML pages. Google provided a "Hello World" sample code to assist novices like me get started with it.

I had intended to use the slide show for the website I am doing for my friend. The slide show is a good idea to showcase the products his business is marketing. A sample page on the website was first created.

The "Hello World" code was copied/pasted into the sample web-page. The code the be found on this link: http://www.google.com/uds/solutions/slideshow/reference.html#hello-world.

The nest step I took was to create a Media RSS for the products of my friend is marketing. The link to the Media RSS I created is http://www.liaredle.com/prodset10.rss.

The RSS will be used by the slide show as reference to the the pictures to display on the slide show. With the RSS in place, I referred to the part of the code that read,

<script type="text/javascript">
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);</script>


After evaluating the code, I replaced the code-line that read 'var samples = "http://dlc0421.googlepages.com/gfss.rss";' with the code-line that refers to the RSS 'var samples = "http://www.liaredle.com/prodset10.rss";'.

The code snippet is now updated to:
<script type="text/javascript">
function load() {
var samples = "http://www.liaredle.com/prodset10.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);
</script>

With the final code completed, I uploaded the page to the website, which can viewed at this link, http://www.liaredle.com/ver2/

And that's how simple it is. In about less than an hour, I have created an impressive AJAX-based slide show, thanks to Google.

Hopefully, the slide show will mean more profits for my friend ^_____^

Labels: ,

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home