用Google Ajax Feed API实现图片幻灯片展示-技术开发专区

用Google Ajax Feed API实现图片幻灯片展示

作者：ITPUB论坛编辑： cynthia 2008-07-14 00:00

【IT168 技术文档】有一个项目需要用到酷炫一些的幻灯片展示效果，于是我在《免费的 Ajax & Javascript 图片画廊(二)》看到可用我熟悉的jQuery插件（mashup出品的jQuery Cycle Plugin）和现在很热门的google api实现。因为以前使用过几个mashup出品的jQuery插件，所以用jQuery的那个插件是没有难度的，于是打算试试google的这个新的API：Google AJAX Slide show

我的本意只是为网站首页加个最新图片的调用，并用ajax的幻灯片效果来展示出这些照片。不过google的这个API实际上是操作feed，读取出feed里的图片（因为google要做的是用脚本实现跨域调用，所以必须用feed，原因以下会提到），所以我必须为网站新建一个rss feed。

一、用自己的网址获得google的api key：
在这里注册：http://code.google.com/apis/ajaxfeeds/signup.html
注意，只需填写自己的域名，域名目录下的所有地址都会生效了。并且这个域名上所有Google API都可以使用这个Key, 不需要为每个API服务申请一遍。

二、创建ajax feed支持的rss：
在介绍上看到，google ajax feed api暂时只支持读取用Yahoo Media RSS Module创建的rss，比如PhotoBucket, Flickr, and Picasa Web Albums ，yahoo media rss 开发文档太冗长，于是打算直接拿个现成的参考， flickr和picasa都被gfw了，所以我选择了photobucket。

随便打开一个photobucket的rss，修改如下保存为accrount.rss，上传到一个网站，比如www.xxx.com/account.rss：

<?xml version=”1.0″ encoding=”utf-8″?>
<rss version=”2.0″ xmlns:dc=”http://purl.org/dc/elements/1.1/” xmlns:media=”http://search.yahoo.com/mrss/”>
    <channel>
<language>en-us</language>
<ttl>60</ttl>
<item>
<guid>点击图片要打开的网址</guid>
<media:content medium=”image” url=”">
                <media:thumbnail url=http://www.xxx.com/xxx.jpg />
            </media:content>
</item>
<item>
<guid>http://www.xxx.com/bbs</guid>
            <media:content medium=”image” url=”">
                <media:thumbnail url=http://www.xxx.com/xxx.jpg />
            </media:content>
</item>
</channel>
</rss>

三、创建你的Hello world:
把以下代码保存为google.html

<!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=yourkey
    type=”text/javascript”></script>
<script src=”http://www.google.com/uds/solutions/slideshow/gfslideshow.js”
    type=”text/javascript”></script>
<style type=”text/css”>
.gss a img {border : none;}
.gss {
width: 288px;
height: 216px;
color: #dddddd;
background-color: #000000;
padding: 8px;
}
</style>
<script type=”text/javascript”>
function load() {
var samples = “http://www.xxx.com/account.rss”;
      var options = {
fullControlPanel : true,
pauseOnHover : false,
displayTime: 2000,
transistionTime: 600,
linkTarget : google.feeds.LINK_TARGET_BLANK
};
new GFslideShow(samples, “slideshow”, options);
}
google.load(”feeds”, “1″);
google.setOnLoadCallback(load);
</script>
</head>
<body>
<div id=”body”>
<div id=”slideshow” class=”gss”>Loading…</div>
</div>
</body>
</html>

关于这个google官方提供的hello world，其实可用更简单的方法写个hello world：
见这里：
This afternoon Google extended the AJAX Feed API with a new Slide Show Control. This control allows you to easily embed a slide show of images from PhotoBucket, Flickr, Picasa Web Albums, or any feed that uses the Media RSS extensions. With just a few lines of code:
new GFslideShow(”http://dlc0421.googlepages.com/gfss.rss”,
document.getElementById(”slideshow”));
You can insert a slide show like this on your site or blog:
As always, let them know what you think in the Google AJAX API developer forum.

四、直接打开google.html，即可看到已经实现了ajax slideshow效果

接下来谈谈google的feed api的问题：
一、我在第二步创建rss文件的过程中，发现只要你的rss第一次被google收录后，几个小时内不管你怎么修改rss，google只认你第一次rss的内容，不会实时更新rss，即使你删了这个rss，google的ajax slideshow仍然可以通过原本保存在他的服务器的feed内容得到feed中原来引用的图片的链接。就像google reader一样（更新了rss的内容但reader中显然不会实时更新）。事实上，google官方的hello world中的地址已经都是失效的，你可以查看hello world中的samples地址：http://dlc0421.googlepages.com/gfss.rss ，将返回一个google pages上的404错误页。看来这个页面不知道删除多久了，但在google的feed中仍然存在。

（这里就对google的隐私策略有点小担心了，只要google愿意，你的那个rss上的内容就永远在他的服务器上了）

二、鉴于第一个问题，所以不管调试还是实际应用时，想要更改feed中的内容调用，只能在第三步里修改samples地址，samples地址为修改后的rss地址，比如www.xxx.com/account2.rss。

三、正因为如此，跨域实现调用rss中的图片内容并不是实时的，而我的项目需要实时显示出最新的，最终放弃这个方案，但google的这个feed api因为是全javascript的，所以不会占用服务器资源，在一些博客上实现一些应用，是很合适的，比如这里的打造基于Google API的文章关联服务。

四、不过虽然放弃这个方案，但并非我就一无所获。google的这个api提醒我可以用读取rss（当然不再是跨域读取，因为跨域读取不会是实时的；我可以试试这里提示的jQuery的getScript函数）的方式来实现图片的展示，创建一个基于yahoo media rss的标准rss是很有利的，这样还可以开放自己网站的api，让别的站点调用自己站点rss上的图片（当然，这时可以用google的api了，对其他站上调用自己站上的图片要求不那么高，并不要求实时）。

五、现在就掌握了三种比较可行的ajax图片调用方法：
1、我一直用的jQuery+简单的服务器端代码实现图片展示
1、采用服务器端脚本对文件夹内的图片调用，如(E)2 Photo Gallery
3、采用（跨域）读取rss的服务器端代码

关注我们