用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在服务器端保存了这么多副本么?那得耗费多少空间啊?
貌似Google并没有存很多副本,只是一张原始的,在请求的时候服务器生成。
有一个问题是,如果是教育网的用户会不会看不到图片呢?我是网通的所以不知道,如果教育网也能看到那就比较完美了。
To Handy:如果只有一张原始的,那得消耗多少CPU啊,我猜至少保存了imgmax=800的副本。
To Kempson: 我就在教育网内,可以看到。现在Google和MSN都已算免费IP了。
我的用了之后老是提示:outerImageContainer,请问应该修改一下哪里呢?
谢谢!地址是:http://www.3cer.cn/wp-picasa-3cer,请帮忙看一下,先谢谢了!
是你的lightbox出错了,看来两者不兼容...
嗯!我把lightbox禁用就好了!,谢谢你了~
再问个问题哈,有没有办法让引用的picasa的图片在打开的时候实现lightbox的那种效果呢?
你可以看一下lightbox具体哪个地方出错了,然后改一下即可。
似乎flickr解禁了,你试试看?
似乎没有。只不过flickr新加了一个服务器 farm3,但原来的farm1和farm2还是看不了。所以有些图片能看,有些不能看。
再说即便解禁了,也不想搬回去了。考虑到blogger的遭遇,说不定哪天又被禁了...政府这一招蛮恨的。
说到“下一张图片时刚开始比较模糊,过一会就会变得清晰的情形”,其实我发现很多喜欢摄影的人都很讨厌这个功能的,还是喜欢flickr的风格。包括相册的封面,picasa的封面图很大,分辨率却很低,看着不舒服。不过从一般人对照片的使用上是足够了:)
那个功能主要有点晃眼睛,有时候还以为眼花呢。有得就有失啊。
picasa的封面图为160*160的,算不上大吧。
问一下,如何用你的代码构建这样一个相册页面呢?
用了picasa这个,可是不能显示出来,不知是怎么回事,我是新建的页面,在里面放入这个代码:
username = 'rongl1110'; photosize='800';
抱歉,你写的代码被WordPress过滤掉了... 能把你的地址留下么?按道理讲按照我给的代码写就可以了,那个js文件非常好用。
不过我现在的相册页面是参考这个js最后用php实现的,所以不用参考我的页面上的源代码了,完全不一样。
http://www.63g.org/?page_id=437,能否看一下我的页面,但是我点击进去的话无法显示单页的,能否把您php实现的方法讲授一下呢?谢谢。
PHP实现的方法有点复杂,现在还没有什么整理出来。
你那里的问题在于你的URL链接里已经带了"?"号了,所以先把你的WordPress改成静态链接。
btw,如果你看不懂我改写的JS文件,最好直接用原始版本。
不知道相册的界面能不能修改
老大。刚看了你的代码。
不懂呢。
你里面的那个“<script type="text/" src="http://zhiqiang.org/images/feed.php?uri='”我要怎么改呢。我用的是Bo-blog。要我自己写个feed.php文件吗?还有你的那个右侧栏是怎么弄的呢。谢谢了
哦,那个是我用来从服务器中转数据的代码,如果你知道是怎么一回事的话请参考feed.php的源代码。否则请重新下载我的修订js文件,地址没变。
至于我的右侧栏怎么弄的,只需要在你需要显示预览的地方插入下面代码:
另外,阅微堂现在用的版本是PHP实现的,所以效果不完全一样。
用了你改写的代码,浏览照片时加载速度提高不少。但是有一个问题,点击上下图片的时候除了图片变化,页面并不刷新,这样的话导航中的照片序号不会变。不过我想后台的np值肯定是变了,不然照片也不会变化了。
不知道这个问题是我blog单独的问题还是wordpress的问题。我的blog是在yo2托管的,页面是在服务器端静态生成的,不知道和这个有没有关系。
所有效果均可参考阅微堂的相册页面。
你说的那个效果是我特意所为,为了加快浏览速度,类似于ajax的思想。
有没有办法在不刷新页面的前提下,使得照片和照片序号同时显示呢?这样浏览者就能知道看到第几张图片了
理论上的效果就应该是你说的那样,阅微堂上的相册就是这种效果。不过改写的那个js还不够完备,有些例外情况没有处理好。我再完善一下,敬请留意。
我知道你那里为什么出问题了,你把那个察看全图的链接删除了。然后js运行出错,导致察看下一张图片的时候导致页面也跳转了。
解决办法很简单,在document.getElementById("zoom")...前面添加if(document.getElementById("zoom"))进行元素存在的预判即可。
我已经改进了文章里提供的js文件,在容易出错的地方加入了一些预判的语句,你可以参考一下。
果然,是我自己改了代码导致出错。现在一切正常了,非常感谢你的帮助!
补充,不是同时显示,而是同时刷新照片和照片的序号,这个序号就是导航“home>album_name>i of N items"中的i。
[...] 来自:http://zhiqiang.org/blog/posts/local-mirror-of-picasaweb-using-api.html [...]
http://www.laifuer.cn/index.php?act=picasa
我的
但是用你的js在照片显示页面 照片大小老是不对
你的显示照片的栏太窄了,考虑更改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;
关键是显示页面的地方看图片属性 他的宽度一直是700+而图片质量很差
就好像是我设置的512的宽度的图片被拉长了的感觉
宽度为700+? 这不可能啊,至少与我的本意不符,我预定的宽度在屏幕分辨率低于1100时最大高度为450,折合宽度为600px,除非你的图片比较扁平。
再说你为啥设置图片宽度为512?
最近我对这玩意儿又更新了蛮多,添加了一些有趣的功能和效果。可惜听说picasaweb在国内被封了?否则我倒是可以发布一个wordpress插件。
wordpress插件已经出了
可是我现在还是没搞清楚图片显示问题
你直接使用那个插件试试看。
原来的那个js文件因为我自己不怎么用,也懒得维护了。
picasaweb现在能访问,而且有文章说中国电信顶不住压力,把封锁的picasaweb又给开通了
呵呵,说了这么多,其实是我有私心,想等你出来了这个插件后直接使用hoho
你网站里有这么多有深度的技术文章,而且还是关于wordpress的,很感兴趣,谢谢!
楼主你好,请问怎么能将你写的js文件放在picasa的网站上呢?
在
语句中,要求该js的文件在的路径是http://yourpath/pwa.js吧?
本人菜鸟,让大家见笑乐。
这个...
你还是直接考虑我发布的picasaweb插件吧,那个js版本用起来比较麻烦。
麻烦帮我看看,为什么点击单张图片显示不出来呢?很奇怪。
现在是取目录列表,怎样只取某一个目录中的所有照片?