Picasa有多悲剧用过的人就知道,从墙域名到关键词重置,到客户端无法登陆……近期完全是看管理功夫网的淫昨晚那啥满意不满意,抽得狠!
下午开始折腾,到晚饭前,都宣告失败。搞定了ajax跨域,xml对象事件处理,TNND竟然有监测js里的ajax链接,被墙撞得爽死。突然想起上篇文章介绍的easy picasa插件调用图片倒一切正常,感觉看源码,原来用的是getjson,不但不会撞墙而且解析速度比xml快多了。
参考提取了一段核心代码,前后加紧折腾了个把小时,终于是搞定了:
林木木的相册:http://immmmm.com/pi/
整个小程序就三个文件:index.htmlpi.csspi.js(pi.7z | 集成slimbox版:pi-b.7z)
html和css也就不说了,研究js前不妨先打开这两个页面:
用户相册首页的json数据: https://picasaweb.google.com/data/feed/api/user/fivemu?alt=json
某一相册的json数据: https://picasaweb.google.com/data/feed/api/user/fivemu/albumid/5559374037517351041?alt=json
那jQuery到底要干些啥呢,简单来说,就是:打开页面直接解析相册首页的数据,通过选择器获取需要的某部分数据并重组添加到页面中来;点击某一相册,解析此相册的数据,获取并重组数据显示到页面中来。
//By http://immmmm.com (function($){ var name = "fivemu" //替换成你的Picasa用户名 $.getJSON("https://picasaweb.google.com/data/feed/api/user/"+name+"?alt=json&callback=?",function(json){ $(json.feed.entry).each(function (i, item){ //遍历此json数据的feed下的entry var title = item.title.$t; //title到底是什么,可以在首页json数据里搜索title var url = item.media$group.media$thumbnail[0].url; var href = item.link[0].href+"&callback=?"; //不加callback会有问题,那就加上呗~ $('#items').append("<div class='item'><div class='thumb'><a href='" + href + "'><img src='" + url + "'/></a><br />" + title + "</div></div>"); }); }); $(".thumb a").live('click',function(){ var href= $(this).attr('href'); $.getJSON(href,function(json){ $('#items').empty(); $(json.feed.entry).each(function (i, item){ var title = item.media$group.media$title.$t; var url = item.media$group.media$thumbnail[0].url;//此url获取到的是72px大小的缩略图 var href = item.media$group.media$content[0].url; $('#items').append("<div class='item'><div class='thumb-1'><a href='" + href + "'><img src='" + url.replace("/s72/","/s160/") + "'/></a><br />" + title + "</div></div>");//通过replace正则改变链接 }); }); return false; }); })(jQuery);

沙发
挤挤~
很好,竟然我第一个沙发?支持下,看看什么时候我也调一下自己的博客,添加这个东西呢。
没,MJJ的蓝X冰的……
缓存问题?哥留言时还没看到他的留言。呜呜
被判垃圾评论了~刚放出来的~
围观相册……好多图片……
先弄下来
终于一见林森真面目
chrome下成功,但是IE8下显示“拒绝访问 jquery.min.js”
这都有?那改成本地的吧~
本地也不行啊,你的演示页也有这个问题。
貌似IE拒绝访问那个jQuery库文件来着……
期待解决办法
已经修复~~
很给力啊,感谢木木!
更新集成slimbox显示特效版本~
奇怪,slimbox我加载了,没效果。xml是做啥的呢?
slimbox2.js放在picasa.js之前jquery之后~
我这样放的,还是不对
需要下载集成版的js,里面又有更改的~
搞定了,晕,我怎么忘了这个了,多谢木木
嗯嗯,简单大方,我也去弄弄了,再把图片转移到Picasa,这堵墙真不让人省心啊
支持折腾折腾~
这个灰常好~
昨天在推上看你放地址就很口水了
嘻嘻,看看今天在加强点啥呗~
哟西~~~能不能做成一个插件呢?
制作成短代码插件?
json是个好东西啊..就是不太会用..
昨天刚懂一点点……
坚持picasa坚持到头破血流啊
这个到么这么严重,只是Google的东西折腾起来比较爽~
木木跟picasa干上了 啊……哈哈、
必须地~
相册没东西?
用的IE吧?换个浏览器试试?
火狐看不到,chrome看到了
现在应该OK了~
好给力的功能,要不是怕墙,还真可靠啊
济南电信,IE,chrome,FF都不显示
已经修复~
不T懂。
发现很多的极品飞车….
我用火狐还是没有看到
不会吧……
这个还不错。
好东西!绝对好东西,作为一个picasa坚定拥护者,必须支持~
呵呵,等会儿把页面模板分享出来~
求~
好东西,木木太给力了。HzlzH童鞋推荐来的。
呵呵,多谢多谢支持~
加上了
那是相当好用呀
能不能对于那些大图片的查看尺寸加一些限制
到另外一篇文章里有个压缩包~
罪过罪过呀
木木的文章还是没看全呀
支持下
呵呵。
翻出去呗~