用Web Picasa API搭建站内相册

在flickr时代,为了专门把站内嵌入相册,还专门写了一篇文章把Flickr相册搬回家。flickr被墙之后,我就把个人相册转到了Web Picasa上。用Picasa Web就简单多了,官方提供了Slideshow Flash,而且形式也比较漂亮,阅微堂之前也是用这样的方式,不过这种方法麻烦的一点是在Picasa上添加相册,就要手动到blog这边更新一次。这两天看到了 Web Picasa API,感觉这玩意儿的功能太强了,完全可以做一个Picasa的站内镜像版。

最后的效果见阅微堂相册

更令人惊讶的是,这种效果完全是javascript(JSON API)实现的(虽然我觉得如果在后台用php实现效果会更好)。主要用的是JavaScript interface to PicasaWeb Albums,一个开源项目,其实就一个单js文件。使用也非常简单,就下面几行代码:

<script type='text/javascript'>
	username = 'your.username'; photosize='800';
</script>

<script type='text/javascript' src='http://yourpath/pwa.js'>
</script>

不过我改了很多地方,除了界面UI上的改变外,主要是改进页面加载速度。有兴趣的可以参考一下我的代码

在修改过程中,仔细学习并应用了picasaweb的照片展示方式。Google的图片预载入做的非常好,浏览图片的时候会自动开始载入下一张图片,而且每张图片有若干种大小,它会从小到大预先载入,以便察看下一张的时候便能使用已经载入的图片,所以经常出现察看下一张图片时刚开始比较模糊,过一会就会变得清晰的情形(其实这种效果用小波编码的图像可以自动实现,但不知为何一直没见到什么应用)。这样做的相册,用户体验非常好,xiaonei等网站的相册可以学一学。不过这种方法会增加网站的带宽成本,Google财大气粗...

另外,我终于知道了为何我以前有时候引用Google的图片却不成功了。Google的图片分为好多种大小,通过imgmax参数调用,比如右边图片的原始地址是DSCN6503.JPG,但直接在网页上引用这个地址是不行的,一定要明确指出需要的图片大小,而且还不能太大,太大了只能提供下载(如果直接输入地址,浏览器会提示你保存图片,而不是显示出来)。能在网页上引用的图片最大宽度(高度)为800px,也即DSCN6503.JPG?imgmax=800。更详细的资料见下表。

输出大小 是否可剪切 是否可嵌入 输出大小 是否可剪切 是否可嵌入
32 Yes Yes 576 No Yes
48 Yes Yes 640 No Yes
64 Yes Yes 720 No Yes
72 No Yes 800 No Yes
144 No Yes 912 No No
160 Yes Yes 1024 No No
200 No Yes 1152 No No
288 No Yes 1280 No No
320 No Yes 1440 No No
400 No Yes 1600 No No
512 No Yes d No No

从表中可以看出Google输出的图片种类之多,难道Google在服务器端保存了这么多副本么?那得耗费多少空间啊?

查看更多关于, , 的内容。

你可能感兴趣的
相关文章

43条留言 -> 跳到留言表格

  • At 2007.11.10 04:18, handy said:

    貌似Google并没有存很多副本,只是一张原始的,在请求的时候服务器生成。

    • At 2007.11.10 09:03, kempson said:

      有一个问题是,如果是教育网的用户会不会看不到图片呢?我是网通的所以不知道,如果教育网也能看到那就比较完美了。

      • At 2007.11.10 09:15, zhiqiang said:

        To Handy:如果只有一张原始的,那得消耗多少CPU啊,我猜至少保存了imgmax=800的副本。

        To Kempson: 我就在教育网内,可以看到。现在Google和MSN都已算免费IP了。

        • At 2007.11.10 16:38, jia11 said:

          我的用了之后老是提示:outerImageContainer,请问应该修改一下哪里呢?
          谢谢!地址是:http://www.3cer.cn/wp-picasa-3cer,请帮忙看一下,先谢谢了!

          • At 2007.11.10 17:33, zhiqiang said:

            是你的lightbox出错了,看来两者不兼容...

          • At 2007.11.10 23:34, jia11 said:

            嗯!我把lightbox禁用就好了!,谢谢你了~
            再问个问题哈,有没有办法让引用的picasa的图片在打开的时候实现lightbox的那种效果呢?

            • At 2007.11.11 08:59, zhiqiang said:

              你可以看一下lightbox具体哪个地方出错了,然后改一下即可。

            • At 2007.11.11 11:58, dribblejj said:

              似乎flickr解禁了,你试试看?

              • At 2007.11.11 19:10, zhiqiang said:

                似乎没有。只不过flickr新加了一个服务器 farm3,但原来的farm1和farm2还是看不了。所以有些图片能看,有些不能看。

                再说即便解禁了,也不想搬回去了。考虑到blogger的遭遇,说不定哪天又被禁了...政府这一招蛮恨的。

              • At 2007.11.11 12:01, dribblejj said:

                说到“下一张图片时刚开始比较模糊,过一会就会变得清晰的情形”,其实我发现很多喜欢摄影的人都很讨厌这个功能的,还是喜欢flickr的风格。包括相册的封面,picasa的封面图很大,分辨率却很低,看着不舒服。不过从一般人对照片的使用上是足够了:)

                • At 2007.11.11 13:53, zhiqiang said:

                  那个功能主要有点晃眼睛,有时候还以为眼花呢。有得就有失啊。

                  picasa的封面图为160*160的,算不上大吧。

                • At 2007.11.20 15:25, 63g said:

                  问一下,如何用你的代码构建这样一个相册页面呢?

                  • At 2007.11.22 21:31, shamas said:

                    用了picasa这个,可是不能显示出来,不知是怎么回事,我是新建的页面,在里面放入这个代码:

                    username = 'rongl1110'; photosize='800';

                    • At 2007.11.22 21:34, zhiqiang said:

                      抱歉,你写的代码被WordPress过滤掉了... 能把你的地址留下么?按道理讲按照我给的代码写就可以了,那个js文件非常好用。

                      不过我现在的相册页面是参考这个js最后用php实现的,所以不用参考我的页面上的源代码了,完全不一样。

                    • At 2007.11.23 10:04, 63g said:
                      • At 2007.11.23 10:27, zhiqiang said:

                        PHP实现的方法有点复杂,现在还没有什么整理出来。

                        你那里的问题在于你的URL链接里已经带了"?"号了,所以先把你的WordPress改成静态链接。

                        btw,如果你看不懂我改写的JS文件,最好直接用原始版本。

                      • At 2007.11.25 17:16, cloudzghost said:

                        不知道相册的界面能不能修改

                        • At 2007.12.04 21:21, catding said:

                          老大。刚看了你的代码。
                          不懂呢。
                          你里面的那个“<script type="text/" src="http://zhiqiang.org/images/feed.php?uri='”我要怎么改呢。我用的是Bo-blog。要我自己写个feed.php文件吗?还有你的那个右侧栏是怎么弄的呢。谢谢了

                          • At 2007.12.05 13:41, zhiqiang said:

                            哦,那个是我用来从服务器中转数据的代码,如果你知道是怎么一回事的话请参考feed.php的源代码。否则请重新下载我的修订js文件,地址没变。

                            至于我的右侧栏怎么弄的,只需要在你需要显示预览的地方插入下面代码:

                            <script type="text/">
                            	albumhead();
                            </script>

                            另外,阅微堂现在用的版本是PHP实现的,所以效果不完全一样。

                          • At 2007.12.21 23:33, totoro said:

                            用了你改写的代码,浏览照片时加载速度提高不少。但是有一个问题,点击上下图片的时候除了图片变化,页面并不刷新,这样的话导航中的照片序号不会变。不过我想后台的np值肯定是变了,不然照片也不会变化了。
                            不知道这个问题是我blog单独的问题还是wordpress的问题。我的blog是在yo2托管的,页面是在服务器端静态生成的,不知道和这个有没有关系。

                            • At 2007.12.22 00:24, zhiqiang said:

                              所有效果均可参考阅微堂的相册页面

                              你说的那个效果是我特意所为,为了加快浏览速度,类似于ajax的思想。

                              • At 2007.12.22 22:29, totoro said:

                                有没有办法在不刷新页面的前提下,使得照片和照片序号同时显示呢?这样浏览者就能知道看到第几张图片了

                                • At 2007.12.22 23:38, zhiqiang said:

                                  理论上的效果就应该是你说的那样,阅微堂上的相册就是这种效果。不过改写的那个js还不够完备,有些例外情况没有处理好。我再完善一下,敬请留意。

                                  • At 2007.12.23 00:14, zhiqiang said:

                                    我知道你那里为什么出问题了,你把那个察看全图的链接删除了。然后js运行出错,导致察看下一张图片的时候导致页面也跳转了。

                                    解决办法很简单,在document.getElementById("zoom")...前面添加if(document.getElementById("zoom"))进行元素存在的预判即可。

                                    我已经改进了文章里提供的js文件,在容易出错的地方加入了一些预判的语句,你可以参考一下。

                                    • At 2007.12.24 12:58, totoro said:

                                      果然,是我自己改了代码导致出错。现在一切正常了,非常感谢你的帮助!

                                  • At 2007.12.22 22:32, totoro said:

                                    补充,不是同时显示,而是同时刷新照片和照片的序号,这个序号就是导航“home>album_name>i of N items"中的i。

                                • [...] 来自:http://zhiqiang.org/blog/posts/local-mirror-of-picasaweb-using-api.html [...]

                                  • At 2008.01.02 12:47, 来福儿 said:

                                    http://www.laifuer.cn/index.php?act=picasa

                                    我的

                                    但是用你的js在照片显示页面 照片大小老是不对

                                    • At 2008.01.03 22:37, Zhang-Zi said:

                                      你的显示照片的栏太窄了,考虑更改js中下面这些参数试试看:

                                      if ( ! photosize)
                                      photosize = 800;
                                      var smallsize = "?imgmax=160";
                                      var bigsize = "?imgmax=" + photosize;
                                      var max_width = 800;
                                      var max_height = 600;
                                      if (document.body.clientWidth < 1100) max_height=535;

                                    • At 2008.01.08 19:13, 来福儿 said:

                                      关键是显示页面的地方看图片属性 他的宽度一直是700+而图片质量很差

                                      就好像是我设置的512的宽度的图片被拉长了的感觉

                                      • At 2008.01.08 20:05, zhiqiang said:

                                        宽度为700+? 这不可能啊,至少与我的本意不符,我预定的宽度在屏幕分辨率低于1100时最大高度为450,折合宽度为600px,除非你的图片比较扁平。

                                        再说你为啥设置图片宽度为512?

                                        最近我对这玩意儿又更新了蛮多,添加了一些有趣的功能和效果。可惜听说picasaweb在国内被封了?否则我倒是可以发布一个wordpress插件。

                                        • At 2008.01.13 11:27, 来福儿 said:

                                          wordpress插件已经出了

                                          可是我现在还是没搞清楚图片显示问题

                                          • At 2008.01.13 22:15, zhiqiang said:

                                            你直接使用那个插件试试看。

                                            原来的那个js文件因为我自己不怎么用,也懒得维护了。

                                      • At 2008.01.13 05:43, purelife said:

                                        picasaweb现在能访问,而且有文章说中国电信顶不住压力,把封锁的picasaweb又给开通了

                                        呵呵,说了这么多,其实是我有私心,想等你出来了这个插件后直接使用hoho
                                        你网站里有这么多有深度的技术文章,而且还是关于wordpress的,很感兴趣,谢谢!

                                        • At 2008.02.20 18:35, toto said:

                                          楼主你好,请问怎么能将你写的js文件放在picasa的网站上呢?

                                          语句中,要求该js的文件在的路径是http://yourpath/pwa.js吧?

                                          本人菜鸟,让大家见笑乐。

                                          • At 2008.02.21 09:46, zhiqiang said:

                                            这个...

                                            你还是直接考虑我发布的picasaweb插件吧,那个js版本用起来比较麻烦。

                                          • At 2008.02.24 21:02, faintbear said:

                                            麻烦帮我看看,为什么点击单张图片显示不出来呢?很奇怪。

                                            • At 2008.04.07 14:25, raven said:

                                              现在是取目录列表,怎样只取某一个目录中的所有照片? :question

                                              • At 2008.06.14 15:56, 空猫 said:

                                                找了很久终于发现了picasa for wordpress的插件,本身一直在用Flickr Photo Gallery插件(http://www.tantannoodles.com/toolkit/photo-album/),其中有一个很好的功能就是能写文章时直接插入相册内的图片而且能选择图片的大小.picasaweb插件添加相册的功能十分好用,不知道站长能不能在插入piasa相册的基础上加入写文章时插入picasa单张图片的功能.
                                                这样的话写文章就大为方便,不需要老是单独上传图片,可以直接通过picasa管理,谢谢

                                                • At 2008.06.14 20:36, zhiqiang said:

                                                  windows live writer有你所说功能的插件。

                                                  要WordPress内部直接支持上传到picasa web还是有一定难度的,目前没有这个功能的计划。

                                                • [...] 参考:用Web Picasa API搭建站内相册 [...]

                                                  • [...] wordpress 400 800",发现阅微堂主有提到Web Picasa API,Google实际上有更多的输出尺寸: The following values are [...]

                                                    • [...] 最近,我又对blog作了进一步的优化。 1、添加版权信息 在关于页面、footer、以及每篇文章的末尾添加了版权信息,我的blog上所有的文章都将遵循 创作共用 署名-非商业性使用-相同方式共享 3.0 协议 2、侧边栏的友情链接Widget改用Hot Friends来实现,这样可以按照大家在我的blog留言的数量来决定其网站链接是否在首页显式。在坏人的帮助下,我把它改成了分2列显式 3、修正了IE6中侧边栏下沉的问题,这还是要感谢坏人提供的CSS样式文件,现在在UCWEB中也能正常浏览了 4、优化页面标题,改为标题在前, Blog名字在后,利于搜索结果的显式 5、添加了WP-PageNavi插件,方便翻页 6、添加了WP-RecentComments插件,在首页显式评论内容 7、在每篇文章的末尾田间了鲜果推荐按钮和豆瓣9点推荐按钮,希望不久以后有文章可以被推荐到鲜果或者豆瓣9点的首页。 8、对于TX们都很关心的相册,我开始使用了Shashin插件,可是它的Highslide一直无法正常启用,虽然我找到了问题的原因,但是一直没有找到解决的办法,后来看到阅微堂的用Web Picasa API搭建站内相册和shamas的wordpress无插件调用Picasa相册这两篇文章就撤掉了Shashin,改用pwa来实现了。只要调用这个java script即可,无需任何Wordpress插件的帮助,不过现在样式还没有改好,页面有点丑就是了 。 [...]

                                                      (Required)
                                                      (Required, not published)

                                                        B | I | U | D | 添加链接 | 插入引用 | 插入代码 | 插入表情 | | + | ?
                                                      guest | 注册 | BBS | 管理 | English | 繁體 | https
                                                      Loading...
                                                      Loading...
                                                      Loading...