利用 PicasaWeb API 制作相册展示页面

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

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

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神马的自己搞定咯～不然？自己动手拿呗！在哪儿？这还要我说！

呼，没了。

呼呼，不行了。

呼呼呼，要看书了。

……

Kana
一月 13, 2011 13:31:13 #1

对相册二字无抵抗力….

回复
- Kana
  一月 13, 2011 13:45:13
  
  效果很好呢:p api实在有爱…但表示1g真的有点….
  
  所以转研究起ipernity了…
  
  回复
  - 林木木
    一月 13, 2011 16:14:16
    
    1g差不多，不过对于摄影爱好者，那就付费呗～
    
    回复
Carrie
一月 13, 2011 13:32:13 #2

原本一串代碼看得我一頭霧水，但經過木木解釋之後，就豁然開朗了

等著你吃飽之後的續作～

我應該不可能是沙發，因為我看完了文章才寫回應

回复
- 林木木
  一月 13, 2011 16:09:16
  
  使用中的picasa.js里压缩过，里面一些变量全部最简单了，所以读起来肯定晕的～
  
  回复
小龙
一月 13, 2011 13:34:13 #3

picasa唯一的不好是空间太小了

回复
- 林木木
  一月 13, 2011 16:10:16
  
  我一个月传几张文章插图，都2年来，100MB都米有……
  
  回复
  - Dianso
    一月 13, 2011 19:49:19
    
    我记得以前上传图片，画质会降低，自动压缩了
    
    回复
hzlzh
一月 13, 2011 13:36:13 #4

这个分页爽了，加载速度也貌似提高了很多哟。

回复
- 林木木
  一月 13, 2011 16:10:16
  
  主要是那个过滤参数给力～
  
  回复
Ethan
一月 13, 2011 13:38:13 #5

我才刚用上，这么快就有更新了。

回复
- 林木木
  一月 13, 2011 16:12:16
  
  嘻嘻，干上了，昨看api文档发现强大的参数，就折腾起来咯～
  
  回复
独自流浪
一月 13, 2011 13:41:13 #6

picasa时不时会打不开（原因大家都知道），那到时候咋办？访问相册不久像访问国外相册一样显示无法连接了？还是像Twitter一样，有个什么方法绕开？保证能正常显示？

回复
- 林木木
  一月 13, 2011 16:13:16
  
  不在乎，我折腾爽完了就随它去呗～
  
  回复
Veezy
一月 13, 2011 13:42:13 #7

技术的东西吗~俺这样的土鳖直接用就好了

回复
- 林木木
  一月 13, 2011 16:13:16
  
  那也是～～呵呵
  
  回复
kingxl
一月 13, 2011 14:17:14 #8

ie下浏览版面有问题呵呵

回复
- 林木木
  一月 13, 2011 16:15:16
  
  css问题，这个就留给各位同学处理啦～
  
  回复
MOPVHS
一月 13, 2011 15:18:15 #9

先留个言再看~~~

回复
c
一月 13, 2011 15:53:15 #10

有必要搞个单个相册的分页显示～

回复
- 林木木
  一月 13, 2011 16:16:16
  
  额……一个相册里面没超过100张，应该不用分页，实现倒是可以实现……
  
  回复
阅微BLOG
一月 13, 2011 16:20:16 #11

哇哦。。先MARk下。。回头看。。

回复
奚少
一月 13, 2011 17:10:17 #12

很难消化掉，哎，只是欠缺啊，抓紧补…

回复
- 林木木
  一月 13, 2011 18:16:18
  
  我也是一点点弄懂的……
  
  回复
感受生活
一月 13, 2011 17:10:17 #13

高深

回复
鸭梨娱乐
一月 13, 2011 18:20:18 #14

国内的公司目光短浅，社会环境如此，要有google这样的公司，难

回复
Louis Han
一月 13, 2011 18:42:18 #15

多注册几个google账号空间就有了

回复
zuiTT
一月 13, 2011 19:54:19 #16

我就喜欢技术文。哎呀吗呀，终于能学点东西拉

回复
- 林木木
  一月 14, 2011 12:57:12
  
  这东东还能深入，我顶不住了，连续3天了，果断到此为止……
  
  回复
smilebull
一月 13, 2011 20:15:20 #17

效果真是不错啊，可惜我的貌似所有和Jquery有关的都出错

回复
- 林木木
  一月 14, 2011 12:59:12
  
  从最基本加载jQuery库弄呗～
  
  回复
枫雪
一月 13, 2011 20:56:20 #18

木木真是太有才了………..仰望

回复
- 林木木
  一月 14, 2011 13:04:13
  
  是雄起了……
  
  回复
老大网络
一月 13, 2011 21:13:21 #19

嗯这个这个“
相片是怎么上传的?

回复
- 林木木
  一月 14, 2011 13:05:13
  
  额……我……
  
  回复
万戈
一月 13, 2011 21:34:21 #20

木帅最近投身于picasa中了

回复
- 林木木
  一月 14, 2011 13:05:13
  
  投完了～
  
  回复
玻璃柠檬
一月 13, 2011 22:07:22 #21

昨天一直进不来，悲剧啊。

回复
- 林木木
  一月 14, 2011 13:06:13
  
  MJJ的蓝冰，服务器被他冷起了……
  
  回复
ifenwen
一月 14, 2011 08:13:8 #22

貌似木木最近一直在折腾这玩意儿啊

回复
- 林木木
  一月 14, 2011 13:11:13
  
  恩，兴起了～
  
  回复
Junan
一月 16, 2011 15:25:15 #23

Picasa可以外链做图床吧~~~？

回复
- 林木木
  一月 16, 2011 17:55:17
  
  一直都可以撒～
  
  回复
icanc
一月 17, 2011 13:03:13 #24

我的QQ空间是黄钻的，图片可外链。请问怎么用这个相册加载QQ空间的图片？

回复
- 林木木
  一月 17, 2011 14:47:14
  
  腾讯是没那多API供你调用的！～
  
  回复
  - 亦白
    一月 24, 2011 10:21:10
    
    腾讯是个死娘们。
    
    回复
亦白
一月 24, 2011 10:07:10 #25

我也用的GG，比你简单很多。

回复
- 林木木
  一月 24, 2011 11:53:11
  
  不一样的需求不一样的代码嘛～
  
  回复
  - 亦白
    一月 24, 2011 11:54:11
    
    因为我懒哈哈哈
    
    回复
mybg
一月 29, 2011 19:32:19 #26

我还是没弄起。。。

回复
- 林木木
  一月 29, 2011 19:35:19
  
  不是有压缩包撒？
  
  回复
  - mybg
    一月 29, 2011 20:08:20
    
    老是没弄对，头大了
    
    回复
mybg
一月 30, 2011 15:44:15 #27

我不清楚是怎么回事，slimbox老是没加载器，干脆弄了个单独的目录来实现。

回复
- 林木木
  一月 31, 2011 12:17:12
  
  额哦，这个我就更说不清咯～
  
  回复
老大网络
二月 3, 2011 01:49:1 #28

木木有没有可能做一个不用翻Q就可以批量上传照片的工具

回复
- 林木木
  二月 3, 2011 19:45:19
  
  涉及到Google的验证授权，这个jQuery可搞不定，技术有限～我的Q：41548682
  
  回复
MrLee
二月 25, 2011 15:19:15 #29

啊啊木木童鞋
对于小白来说
你的压缩包我都不知道如何安装，求赐教。
上传到哪个目录

回复
- 林木木
  二月 25, 2011 16:53:16
  
  这个是给你折腾的，如果连压缩包里的文件怎么使用都不晓得，那我飘过……
  
  回复
delay7
三月 15, 2011 05:25:5 #30

这样一看。。。有点晕。。。分开几天慢慢消化。。
相册的效果很不错！！！~

回复
coldplains
三月 16, 2011 16:52:16 #31

好吧我承认我太笨了，不会折腾呢~~如何在wordpress的page页面实现呢？就跟你的相册页一样的效果

回复
coldplains
三月 25, 2011 22:14:22 #32

总算搞定了

回复
nopoto
四月 2, 2011 17:06:17 #33

这看起来怎么那么的麻烦

回复
- 林木木
  四月 2, 2011 19:13:19
  
  跟详解代码写一块儿了，文章里用写好的html压缩包～
  
  回复
  - nopoto
    四月 2, 2011 19:14:19
    
    好像现在那网站打不开了你那个SlimBox2 for WordPress 插件安装上去怎么无法显示灯箱效果
    
    回复
    - 林木木
      四月 2, 2011 19:28:19
      
      jQuery库得加载，如果之前就有加载那就不要勾选插件里的选项，还有选择器要设置正确～
      
      回复
      - nopoto
        四月 2, 2011 19:34:19
        
        老王已经帮我弄好了是什么foot.php的那代码移了一下
        
        回复
nopoto
四月 2, 2011 18:02:18 #34

看不懂如何弄

回复
Joven
四月 5, 2011 08:22:8 #35

博主能不能改进一下，使其可以添加多个Google ID

回复
- 林木木
  四月 5, 2011 13:26:13
  
  我记一个～有时间完成
  
  回复
双陈记
四月 7, 2011 11:39:11 #36

木木大大，我在本地测试，用你这个打包的代码弄了一个照片页面，缩略图都能显示，单击缩略图出来后是白的，没有图片，神马情况啊！求木木童鞋解答！

回复
- 林木木
  四月 7, 2011 12:17:12
  
  可能是这几天picasa的https链接也抽……
  
  回复
Jessy
四月 12, 2011 13:25:13 #37

启用了……

回复
xyiblog
四月 30, 2011 09:49:9 #38

又弄好了···看到新代码当然不能错过，以前也研究过Picasa但因为代码不是很清晰改改就出错后面放弃使用插件了，不过木木这个jQuery很不错不知道会不会过期

回复
- 林木木
  四月 30, 2011 10:54:10
  
  问相关部门了……
  
  回复
代码回音
七月 9, 2011 09:50:9 #39

效果很不错啊，有没有直接弄成wp插件？

回复
- 林木木
  七月 14, 2011 00:07:0
  
  http://immmmm.com/picasaweb-for-wordpress.html 这个，相册自己折腾咯～
  
  回复
Dianso
八月 2, 2011 23:21:23 #40

弄了个反向代理，但是默认的图片地址是js解析出来的吧，怎么在JS里替换图片的地址呢？求助

回复
- 林木木
  八月 4, 2011 18:09:18
  
  这个你QQ里问我吧，要改js里代码～
  
  回复
Yusky
十月 11, 2011 01:44:1 #41

总算折腾好了。效果不错。不过图片不能显示大点了么？ http://jihao.sinaapp.com 图片放大之后还是很小

回复
- 林木木
  十月 12, 2011 13:52:13
  
  图片大小原图绝对的～
  
  回复
酷寒清风
十月 19, 2011 22:47:22 #42

可以做个flickr的么

回复
- 林木木
  十月 20, 2011 07:06:7
  
  flickr有调用限制，折腾过技术不过弃之。
  
  回复
怡红公子
十一月 21, 2011 00:40:0 #43

木木桑~能不能根据
http://album.imnerd.org/api.php
帮我写一个jq版的啊，jq我表示好无力啊
PS:API调用参数说明
http://lzm.ch/t
PS:不需要分页什么的直接输出相册页面和相片页面就好了，非常感谢

回复
- 林木木
  十一月 22, 2011 19:37:19
  
  应该可行，不过最近木时间……
  
  回复
  - 怡红公子
    十一月 22, 2011 21:48:21
    
    唔~没关系，只要不是明年做出来，问题应该都是不大的
    
    回复
    - 林木木
      十一月 25, 2011 10:39:10
      
      假期了记得提醒我～
      
      回复
      - 怡红公子
        十一月 25, 2011 13:40:13
        
        明天我会果断Q你的
        
        回复

木木木木木

利用 PicasaWeb API 制作相册展示页面

发表评论取消回复

发表评论 取消回复

发表评论取消回复