头句必须得赞一句Google的开放性,国内啥时有这么一种精神的互联网公司,就让人满足了。

本文主要是想表达一下利用 Picasa Web Albums Data API,并基于jQuery的Ajax来制作一个Picasa相册的展示页面。成果如下:

https://immmmm.com/photo

2011-01-14更新:发现很多童鞋还是不会折腾完整的,那还是给出一个相对完整的文件代码:

picasa.7z (包含了一些渐隐渐显、页面滑动以及slimbox特效)

与几天前的页面相比,数据获取方面传入了过滤参数,简单来说就是:要哪些数据就获取哪些。这比原来不管需要不需要先加载来再说,那解析速度快多少倍就不用多说了~

怎么过滤的,参数怎么写的,还是得 Picasa Web Albums Data API说了算。如果看得懂英文还是直接过去自个儿研究呗~下面简单说几个我们用得着的参数(用不着说它干嘛呢~):

基本的API链接是这样的,以我的GoogleID“fivmeu”来示例:

 
https://picasaweb.google.com/data/feed/api/user/fivemu

打开以上链接看到的就是此帐户所有相册的xml数据,晕了吧,一坨代码~

简单加两个让我看起来舒服些的参数:prettyprint=true 加上换行(ajax时可去除);max-results=1 只返回一条结果(这个参数也是相册分页实现的关键参数之一) ,多个参数之间是以 & 来衔接。

 
https://picasaweb.google.com/data/feed/api/user/fivemu?prettyprint=true&max-results=1

现在返回的数据相对清晰些了,一起来看看哪些数据是需要的。

 
<openSearch:totalResults>35</openSearch:totalResults>
 
<entry>
 
	<title type='text'>2011-1</title>
 
	<gphoto:id>5559374037517351041</gphoto:id>
 
	<media:group>
 
		<media:thumbnail url='https://lh5.googleusercontent.com/_65ZfNm-tR48/TSbdO3fAOIE/AAAAAAAAETQ/P_9_pfNGQB0/s160-c/20111.jpg' height='160' width='160'/>
 
	</media:group>
 
</entry>

那怎么只获取这些数据呢,关键参数中的关键参数(没有之一)上场:fields,它能过滤无关数据,只获取需要的!

首先,得获取总共有多少个相册,得用来生成相册导航的页码:

 
https://picasaweb.google.com/data/feed/api/user/fivemu?prettyprint=true&max-results=1&fields=openSearch:totalResults

现在爽了吧?哦,还有我们要获取entry里的title,gphoto:id,media:group,来生成相册列表:

 
https://picasaweb.google.com/data/feed/api/user/fivemu?prettyprint=true&max-results=1&fields=entry(title,gphoto:id,media:group(media:thumbnail))

关键难点在fields的写法及xml数据的层级关系,昨这东东耗费了我不少时间,主要是一大坨代码迎面来而这感觉实在是让人不知所措,犯晕得狠。当然,如果你觉得原始的xml数据里有自己想要的,比如相册描述、总共有多少图片……那就等你去发现咯~

对应以上两个链接返回的数据,我们利用jQuery的ajax来完成相册列表页面。下面建议喜欢折腾想理解代码内容的童鞋们,跟着我一步一步,绝对是一件非常神奇的过程。

先创建一个html:

 
<!DOCTYPE html>
 
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
 
<script>
 
jQuery(document).ready(function($){
 
	//jQuery的核心代码就是写到这儿啦~
 
});
 
</script>
 
</head>
 
<body>
 
	<div id="navi"></div>
 
	<div id="items"></div>
 
</body>
 
</html>

下面就开始jQuery核心代码的书写了:

先说明一点:为什么选择json格式,首页数据量比xml小,重点是支持跨域。api当然也提供了转换参数&alt=json,至于为什么要加上&callback=?,深层次原因还不懂反正是要什么回传数据啥的,那就加上呗。

看分页导航的Ajax代码:

 
var name = "fivemu" //修改成你的Google用户名
 
var numx = 16; //每页显示相册数量
 
var href="http://picasaweb.google.com/data/feed/api/user/"+name;
 
$.getJSON(href+"?fields=openSearch:totalResults&alt=json&callback=?",function(json){ //不妨先看看jQuery文档ajax的$.getJSON的格式,然后想想现在获取的数据链接是?
 
	var pg = parseInt(json.feed.openSearch$totalResults.$t/numx)+1,i=1; //取整(相册总数量÷每页相册数量)+1,什么意思?这样计算的结果是把相册总共有几页;然后赋值i一个初始量1
 
	while( i <= pg ){ //while是JavaScript的一个循环执行语句,刚学的
 
		$("#navi").append("<a href='"+i+"'> P "+i+" </a> >> "); //把页码添加到#navi里,并给每个a的href添加i数值
 
		i++; //执行一次i+1,这么写就能让它循环3遍了,结果?
 
	}
 
});

可以保存一下,访问html页面,都出来些啥东东:

页码出来就好办了,添加点击事件。先再看一个参数:start-index=1,从第一个相册开始显示。

也就是第一页16个相册的数据链接是:

 
https://picasaweb.google.com/data/feed/api/user/fivemu?start-index=1&max-results=16&fields=entry(title,gphoto:id,media:group(media:thumbnail))

第二页也就是第17个开始往后的16个相册:

 
https://picasaweb.google.com/data/feed/api/user/fivemu?start-index=17&max-results=16&fields=entry(title,gphoto:id,media:group(media:thumbnail))

第三页:……

理下思路,jQuery要干的事:点击页码获取它的数值,然后用公式“开始相册数值=每页相册数*(页码数值-1)+1”。如,点击页码1,16*(1-1)+1=1;页码2,16*(2-1)+1=17;页码3……

看相对应的ajax代码:

 
$("#navi a").live("click",function(){ //live下的click必须的
 
	var pgs=$(this).attr("href")-1,nums = numx*pgs+1;  //运算,运算,运算
 
	$.getJSON(href+"?start-index="+nums+"&max-results="+numx+"&fields=entry(title,gphoto:id,media:group(media:thumbnail))&alt=json&callback=?",function(json){ //试试读一下这个获取数据的链接?
 
		$("#items").empty();  //清空原因数据,因为我们采用的是append追加的方式
 
		$(json.feed.entry).each(function(i,data){
 
			var title=data.title.$t,id=data.gphoto$id.$t,url=data.media$group.media$thumbnail[0].url;  //获取对应属性的内容,写法格式就得看json的文档了
 
			$("#items").append("<div class='item'><div class='thumb'><img src='"+url+"' id='"+id+"'/><br /><span>"+title+"</span></div></div>");
 
		});
 
	});
 
	return false;
 
});

又可以保存一下,鸡冻人心的时刻,刷新,点击页码1,页码2,页码3:

慢慢慢慢,数一数每页是16个相册不,第二页是不是从第17个开始,还有还有第三页~~

额,不对呀,怎么你打开页面就直接显示第一页了呢?嘿嘿,来点小聪明,给html里的navi里加一段:

 
<div id="navi"><a href="1" style="display:none;"></a></div>

再在上段jQuery代码加一句:

 
$("#navi a").click();  //模拟用户点击a标签

保存,刷新!额?恩!

到此,导航和相册列表部分已经完成了。下面还要做什么?当然是点击相册展示此相册的图片咯~

Google也给我们留了参数,某用户(fivemu)某相册(5559374037517351041)的链接是:

 
https://picasaweb.google.com/data/feed/api/user/fivemu/albumid/5559374037517351041?alt=json

我们只需要部分数据,加参数fields:

 
https://picasaweb.google.com/data/feed/api/user/fivemu/albumid/5559374037517351041?fields=entry(media:group(media:content,media:title))&alt=json

书写jQuery代码:

 
$(".thumb img").live("click",function(){ //点击某相册事件
 
	var id=$(this).attr("id"),url=href+"/albumid/"+id+"?fields=entry(media:group(media:content,media:title))&alt=json&callback=?"; //构建数据链接
 
	$.getJSON(url,function(json){
 
		$("#items").empty();
 
		$(json.feed.entry).each(function(i,data){
 
			a=data.media$group;var title=a.media$title.$t,url=a.media$content[0].url;
 
			$("#items").append("<div class='item'><div class='thumb-1'><a href='"+url+"?imgmax=800'><img src='"+url+"?imgmax=118'/></a><br /><span>"+title+"</span></div></div>")
 
		});
 
		//$(".thumb-1 a:has(img)").slimbox();  //图片特效的选择代码
 
	});
 
	return false;
 
});

这儿有个图片外链大小的参数: imgmax=800,800px图片。

哦,CSS神马的自己搞定咯~不然?自己动手拿呗!在哪儿?这还要我说!

呼,没了。

呼呼,不行了。

呼呼呼,要看书了。

……