在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>

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在服务器端保存了这么多副本么?那得耗费多少空间啊?

用Web Picasa API搭建站内相册的更多相关文章

  1. 通过Google Custom Search API 进行站内搜索

    今天突然想把博客的搜索改为google的站内搜索,印象中google adsense中好像提高这个站内搜索的代码,但苦逼的是google adsense帐号一直审核不通过,所以只能通过google c ...

  2. 百度站内搜索https不可用切换api搜索,加上谷歌api站内搜索

    google推https几年了,百度开始宣传全面https,但是,百度站内搜索 自己的服务却不走https,接口报错.百度分享也是. 然后采用http://search.zhoulujun.cn/cs ...

  3. 借助 Lucene.Net 构建站内搜索引擎(下)

    前言:上一篇我们学习了Lucene.Net的基本概念.分词以及实现了一个最简单的搜索引擎,这一篇我们开始开发一个初具规模的站内搜索项目,通过开发站内搜索模块,我们可以方便地在项目中集成站内搜索功能.本 ...

  4. es站内站内搜索笔记(一)

    es站内站内搜索笔记(一) 第一节: 概述 使用elasticsearch进行网站搜索,es是当下最流行的分布式的搜索引擎及大数据分析的中间件,搜房网的主要功能:强大的搜索框,与百度地图相结合,实现地 ...

  5. 站内全文检索服务来了,Xungle提供免费全文检索服务

    免费站内全文检索服务来了,是的,你没听错.全文检索相信大家已经不太陌生,主流检索服务有sphinx.xunsearch等,但这些都受服务器限制,对于中小站长尤其是没有服务器实现就困难了,随着数据量的增 ...

  6. 借助 Lucene.Net 构建站内搜索引擎(上)

    前言:最近翻开了之前老杨(杨中科)的Lucene.Net站内搜索项目的教学视频,于是作为老杨脑残粉的我又跟着复习了一遍,学习途中做了一些笔记也就成了接下来您看到的这篇博文,仅仅是我的个人笔记,大神请呵 ...

  7. 在ssh中利用Solr服务建立的界面化站内搜索---solr2

         继上次匆匆搭建起结合solr和nutch的所谓站内搜索引擎之后,虽当时心中兴奋不已,可是看了看百度,再只能看看我的控制台的打印出每个索引项的几行文字,哦,好像差距还是有点大……        ...

  8. 在ssh中利用Solr服务建立的界面化站内搜索

         继上次匆匆搭建起结合solr和nutch的所谓站内搜索引擎之后,虽当时心中兴奋不已,可是看了看百度,再只能看看我的控制台的打印出每个索引项的几行文字,哦,好像差距还是有点大……      简 ...

  9. 站内搜索(ELK)之开篇

    因工作需要,近期使用ELK搭建单位内部“站内搜索”,目前已将内部OA系统20余个流程的表单.附件的数据索引到elasticsearch中,包括打印复印流程.声像采集流程.远程文件发送.规章制度.内线电 ...

随机推荐

  1. [经典] Best Time to Buy and Sell Stock

    这一系列求最优值的问题变种挺多 1. Say you have an array for which the ith element is the price of a given stock on ...

  2. SDH,WDM, OTN, MSTP,Ethernet, PTN, IP RAN

    概要:对带宽的需求,加上IP化严重,光通信技术不断地进化.最早的技术就是SONET.SDH,后来的技术都是在此技术上不断地改进和发展,以太网技术是一种局域网技术. SDH带宽小,提高带宽出现了WDM波 ...

  3. asterisk manager api 配置 (manager.conf)

    http://blog.csdn.net/niino/article/details/5748805 要激活AMI,需要在/etc/asterisk/manager.conf中,[general]块下 ...

  4. Maven 私服配置 转

    1.配置Nexus为maven的私服 第一种方式:在项目的POM中如下配置 <repositories>     <repository>         <id> ...

  5. CMS收集器

    CMS收集周期 CMS并非没有暂停,而是用两次短暂停来替代串行标记整理算法的长暂停,它的收集周期是这样:初始标记(CMS-initial-mark) -> 并发标记(CMS-concurrent ...

  6. 单元测试时候使用[ClassInitialize]会该方法必须是静态的公共方法,不返回值并且应采用一个TestContext类型的参数报错的解决办法

    using Microsoft.VisualStudio.TestTools.UnitTesting; 如果该DLL应用的是 C:\Program Files\Microsoft Visual Stu ...

  7. android ui定义自己的dialog(项目框架搭建时就写好,之后事半功倍)

    自定义一个dialog: 之前有很多博客都有过这方面的介绍,可是个人觉得通常不是很全面,通用性不是很强,一般会定义一个自己的dialog类,然后去使用,难道每一个dialog都要定义一个class吗? ...

  8. android 58 jvm和dvm的区别(Dalvil VM)

    java程序在jvm和dvm的执行过程: #jvm和dvm的区别(Dalvil VM) 谷歌刚开发的安卓系统用的就是JVM,JVM版权属于sun公司也就是Oracle公司,后来用的是DVM,由于版权问 ...

  9. JAVA大集合数据分批次进行切割处理

    今天遇到一个大集合里面的数据删除问题, 因为是一个大集合,如果同时传递到数据库,那么就会造成数据库压力 所以分批次的进行批量操作 其实 也可以采用多线程来处理或者多批次加多线程来处理都是可以的 下面的 ...

  10. iOS-设置状态栏白色以及覆盖状态栏

    iOS-设置状态栏白色以及覆盖状态栏 将状态栏设置为白色 首先, 在info.plist中添加一个标记. View controller–based status bar appearance键值设置 ...