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

ZDNet软件频道 时间:2008-07-24 作者: | BBS.ChinaUnix.net 我要评论()
本文关键词:API 图片 展示 OpenAPI 软件
有一个项目需要用到酷炫一些的幻灯片展示效果,于是我在《免费的 Ajax & Javascript 图片画廊(二)》看到可用我熟悉的jQuery插件(mashup出品的jQuery Cycle Plugin)和现在很热门的google api实现。
有一个项目需要用到酷炫一些的幻灯片展示效果,于是我在《免费的 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的服务器端代码

API

图片

展示

OpenAPI

软件


百度大联盟认证黄金会员Copyright© 1997- CNET Networks 版权所有。 ZDNet 是CNET Networks公司注册服务商标。
中华人民共和国电信与信息服务业务经营许可证编号:京ICP证010391号 京ICP备09041801号-159
京公网安备:1101082134