[jQuery] Picasa相册展示页面

Picasa有多悲剧用过的人就知道,从墙域名到关键词重置,到客户端无法登陆……近期完全是看管理功夫网的淫昨晚那啥满意不满意,抽得狠!

下午开始折腾,到晚饭前,都宣告失败。搞定了ajax跨域,xml对象事件处理,TNND竟然有监测js里的ajax链接,被墙撞得爽死。突然想起上篇文章介绍的easy picasa插件调用图片倒一切正常,感觉看源码,原来用的是getjson,不但不会撞墙而且解析速度比xml快多了。

参考提取了一段核心代码,前后加紧折腾了个把小时,终于是搞定了:

林木木的相册http://immmmm.com/pi/

整个小程序就三个文件:index.htmlpi.csspi.jspi.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);
主机格调
  1. jiechic
    一月 8, 2011 23:16:23 #2

    很好,竟然我第一个沙发?支持下,看看什么时候我也调一下自己的博客,添加这个东西呢。

      • 缓存问题?哥留言时还没看到他的留言。呜呜 :???:

        • 被判垃圾评论了~刚放出来的~

  2. 新手
    一月 8, 2011 23:16:23 #3

    围观相册……好多图片……

  3. 方丈
    一月 8, 2011 23:31:23 #4

    :arrow: 虽然没有沙发……但是还是来了……哈哈
    先弄下来

  4. 张衡
    一月 8, 2011 23:37:23 #5

    终于一见林森真面目 :eek: :eek: :eek:

  5. mybg
    一月 9, 2011 00:36:0 #6

    chrome下成功,但是IE8下显示“拒绝访问 jquery.min.js”

    • 这都有?那改成本地的吧~

      • mybg
        一月 9, 2011 14:54:14

        本地也不行啊,你的演示页也有这个问题。

        • 貌似IE拒绝访问那个jQuery库文件来着……

          • mybg
            一月 9, 2011 16:45:16

            期待解决办法

              • mybg
                一月 9, 2011 20:37:20

                很给力啊,感谢木木! :roll:

                • 更新集成slimbox显示特效版本~

                  • mybg
                    一月 9, 2011 23:44:23

                    奇怪,slimbox我加载了,没效果。xml是做啥的呢?

                    • slimbox2.js放在picasa.js之前jquery之后~

                    • mybg
                      一月 10, 2011 14:13:14

                      我这样放的,还是不对 :arrow:

                    • 需要下载集成版的js,里面又有更改的~

                    • mybg
                      一月 10, 2011 15:48:15

                      搞定了,晕,我怎么忘了这个了,多谢木木 :razz:

  6. zuiTT
    一月 9, 2011 08:50:8 #7

    嗯嗯,简单大方,我也去弄弄了,再把图片转移到Picasa,这堵墙真不让人省心啊

  7. Veezy
    一月 9, 2011 08:57:8 #8

    这个灰常好~
    昨天在推上看你放地址就很口水了 :idea:

    • 嘻嘻,看看今天在加强点啥呗~

  8. 万戈
    一月 9, 2011 09:03:9 #9

    哟西~~~能不能做成一个插件呢?

  9. ADD~``
    一月 9, 2011 11:05:11 #11

    json是个好东西啊..就是不太会用..

  10. 坚持picasa坚持到头破血流啊

    • 这个到么这么严重,只是Google的东西折腾起来比较爽~

  11. 木木跟picasa干上了 啊……哈哈、

    • mybg
      一月 9, 2011 16:44:16

      用的IE吧?换个浏览器试试?

      • 火狐看不到,chrome看到了 :!:

  12. winy
    一月 9, 2011 17:58:17 #15

    好给力的功能,要不是怕墙,还真可靠啊

  13. 小狼
    一月 9, 2011 18:35:18 #16

    济南电信,IE,chrome,FF都不显示

  14. 枫雪
    一月 9, 2011 21:20:21 #18

    发现很多的极品飞车….

  15. 我用火狐还是没有看到

  16. 好东西!绝对好东西,作为一个picasa坚定拥护者,必须支持~

  17. Ethan
    一月 13, 2011 13:17:13 #22

    好东西,木木太给力了。HzlzH童鞋推荐来的。

  18. 加上了
    那是相当好用呀
    能不能对于那些大图片的查看尺寸加一些限制

    • 到另外一篇文章里有个压缩包~

      • 罪过罪过呀
        木木的文章还是没看全呀

  19. Fanr
    三月 5, 2011 23:08:23 #24

    :idea: 收藏了~~~

  20. 小草
    四月 4, 2011 10:15:10 #25

    :shock:

    支持下
    呵呵。

  21. xyiblog
    四月 30, 2011 00:04:0 #26

    :grin: 爱死木木哈····搞定····你用什么上传相片的大陆被墙了

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*


您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">