外部网页调用用Google Picasa网络相册的图片
作者:春泥博客 日期:2008-3-16 17:32:26
外部网页调用用Google Picasa网络相册的图片
(春泥博客)Google Picasa网络相册是一个很好的公工具。它是免费的,相册容量是1024M(1G),并且相册容量也会一直增长的。与其他的网络相册不同,Google Picasa网络相册里的图片支持外部网页的调用。这一点与163相册,百度相册不同(在此点名批评一下)。
Google Picasa网络相册也有很多的API应用,比如本博客主页右侧的类似于Flash的小板块就是利用Google API制作的。
现在Jesse Berman先生又开发了一个令人十分激动的应用,他用了很简短的代码就实现了极为强大的功能-在外部网页(是在一张网页里)全部显示Google Picasa 相册里的图片。
你甚至可以在一张空白的网页里添加以下代码就可以访问你的Picasa 相册了:
<script type="text/javascript">
username="你的Picasa帐户名称";
photosize="800";
columns="4";
</script>
<script type="text/javascript" src="http://www.shiyimin.com.cn/album/pwa.js"></script>
对以上代码做几点说明:
首先,是要获得自己Picasa相册的用户名(Username),没有的要先注册啊。
二 把以下代码添加到网页文件里:
<script type="text/javascript">
username="你的Picasa帐户名称";
photosize="800";
columns="4";
</script>
<script type="text/javascript" src="http://www.shiyimin.com.cn/album/pwa.js"></script>
替换掉其中的“Picasa帐户名称”
预览网页,就可以从外部网页查看Google Picasa网络相册了。
显示的效果就如春泥博客的相册一样。当然,你也可以把pwa.js的代码拷贝到你自己的空间里。如果你的编程语言知识较好的话,你也可以修改pwa.js文件。
Jesse Berman真是聪明,用了几个函数就实现了非常复杂的功能。
还有一点,你也可以加入三张导航图片back.jpg(前一张图片), next.jpg(后一张图片), and home.jpg(相册目录),这三张图片一定要与pwa.js在同一个目录里面。
点击下载pwa.js
后记:今天在IE里测试的时候竟然发现相册无法显示,而在Firefox里显示很正常。看来还要好好研究一下。我不知道是不是所有的IE用户都无法访问相册。读者能不能留言告诉我一声啊。
再后记:经过仔细的对比,终于找到Google Picasa网络相册在IE浏览器里不能显示的病根了。原来是页面编码的问题,我原来用的编码是charset=gb2312,IE无法显示。现在把编码改成 charset=utf-8,Picasa相册在IE里面显示很正常了。
所以,以后的读者也要注意这个问题,一定要把编码格式改成 charset=utf-8。
不过还有一个小问题,pwa.js好像不支持把里面的说明修改成中文。没办法,只能用英文了。
我也很期望有人把这个Goolge Picasa相册做成Zblog的一个插件。
原文链接:http://www.shiyimin.com.cn/post/your_Google_picasa_web_album.html
(春泥博客)Google Picasa网络相册是一个很好的公工具。它是免费的,相册容量是1024M(1G),并且相册容量也会一直增长的。与其他的网络相册不同,Google Picasa网络相册里的图片支持外部网页的调用。这一点与163相册,百度相册不同(在此点名批评一下)。
Google Picasa网络相册也有很多的API应用,比如本博客主页右侧的类似于Flash的小板块就是利用Google API制作的。
现在Jesse Berman先生又开发了一个令人十分激动的应用,他用了很简短的代码就实现了极为强大的功能-在外部网页(是在一张网页里)全部显示Google Picasa 相册里的图片。
你甚至可以在一张空白的网页里添加以下代码就可以访问你的Picasa 相册了:
<script type="text/javascript">
username="你的Picasa帐户名称";
photosize="800";
columns="4";
</script>
<script type="text/javascript" src="http://www.shiyimin.com.cn/album/pwa.js"></script>
对以上代码做几点说明:
username要更改成你自己的的Picasa相册的帐户名称,比如我的Picasa相册的地址是http://picasaweb.google.com/shenyang2007,那么我的Picasa帐户名称就是shenyang2007.下面具体介绍一下外部网页调用用Google Picasa网络相册的图片的方法:
photosize控制每一张图片在显示的时候的尺寸大小,推荐使用800。
columns定义相册缩略图的列数,你可以根据网页大小定义。
首先,是要获得自己Picasa相册的用户名(Username),没有的要先注册啊。
二 把以下代码添加到网页文件里:
<script type="text/javascript">
username="你的Picasa帐户名称";
photosize="800";
columns="4";
</script>
<script type="text/javascript" src="http://www.shiyimin.com.cn/album/pwa.js"></script>
替换掉其中的“Picasa帐户名称”
预览网页,就可以从外部网页查看Google Picasa网络相册了。
显示的效果就如春泥博客的相册一样。当然,你也可以把pwa.js的代码拷贝到你自己的空间里。如果你的编程语言知识较好的话,你也可以修改pwa.js文件。
Jesse Berman真是聪明,用了几个函数就实现了非常复杂的功能。
还有一点,你也可以加入三张导航图片back.jpg(前一张图片), next.jpg(后一张图片), and home.jpg(相册目录),这三张图片一定要与pwa.js在同一个目录里面。
点击下载pwa.js
后记:今天在IE里测试的时候竟然发现相册无法显示,而在Firefox里显示很正常。看来还要好好研究一下。我不知道是不是所有的IE用户都无法访问相册。读者能不能留言告诉我一声啊。
再后记:经过仔细的对比,终于找到Google Picasa网络相册在IE浏览器里不能显示的病根了。原来是页面编码的问题,我原来用的编码是charset=gb2312,IE无法显示。现在把编码改成 charset=utf-8,Picasa相册在IE里面显示很正常了。
所以,以后的读者也要注意这个问题,一定要把编码格式改成 charset=utf-8。
不过还有一个小问题,pwa.js好像不支持把里面的说明修改成中文。没办法,只能用英文了。
我也很期望有人把这个Goolge Picasa相册做成Zblog的一个插件。
原文链接:http://www.shiyimin.com.cn/post/your_Google_picasa_web_album.html
Tags: Google Picasa 相册 图片
相关日志:
评论: 27 | 引用: 0 | 查看次数:
回复
cyg
[2008-3-18 0:06:59]
可以外调就是好。
我用sv相册插件。
春泥博客 于 2008-3-29 0:30:14 回复你用的插件也很好啊。
finder 于 2008-3-29 20:18:00 回复你的也不错,也用了。
谢谢你!我用你提供的办法搭建成功了!用IE浏览确实有问题,网页编码换了也不行,后来把js的编码也换了才成功...(utf-8)
春泥博客 于 2008-5-4 21:37:31 回复嗯,恭喜啦。
姐姐,我的相册不显示名称,是英文的,但是就是不显示名称,不知道为什么?求救!
http://picasaweb.google.com/god.customers
QQ:409187655
请各位路过的高手救救我的PP!谢谢!
http://picasaweb.google.com/god.customers
QQ:409187655
请各位路过的高手救救我的PP!谢谢!
@@ xiangyun
你好,你先要登录 Google帐户,转到 Picasa 相册,然后进入其中的的一个相册。然后点击“修改相册属性”,修改相册的名称就可以了。
你是不是也要搭建一个像http://www.shiyimin.com.cn/album/一样的相册啊?
我可以帮你啊。
你好,你先要登录 Google帐户,转到 Picasa 相册,然后进入其中的的一个相册。然后点击“修改相册属性”,修改相册的名称就可以了。
你是不是也要搭建一个像http://www.shiyimin.com.cn/album/一样的相册啊?
我可以帮你啊。
gary 于 2009-3-27 2:06:39 回复在我用“修改相册属性”功能时,网页会自动关闭。试了无数次,每次都是一样结果,请问您知道是什么原因吗?谢谢!
春泥博客 于 2009-3-27 7:55:57 回复我从来没遇到这种情况,大概是系统的问题。我也不太确定。
回复:笨鸟
你在pwi.js里面查找 back.jpg 和 home.jpg 和 next.jpg ,然后修改 这几张图片的地址就可以。
还有问题的话,可以给我发邮件:
shi#######shiyimin.com.cn
你在pwi.js里面查找 back.jpg 和 home.jpg 和 next.jpg ,然后修改 这几张图片的地址就可以。
还有问题的话,可以给我发邮件:
shi#######shiyimin.com.cn
其实ZBLOG现在有了PICASA的像册插件了 ,我现在就在用,不过问题是我们现在是8个人用一个博客,想一个人搞一个PICASA像册加到 ZBLOG里 修改了下插件没搞定,你这个手工的也许可以弄一弄 呵呵
回复:笨鸟
是 PWA.js。
更改图片引用路径的话,可以分别查找:
src='back.jpg'
src='home.jpg'
src='next.jpg'
然后改成你要的路径。
是 PWA.js。
更改图片引用路径的话,可以分别查找:
src='back.jpg'
src='home.jpg'
src='next.jpg'
然后改成你要的路径。
src='C:\Documents and Settings\Administrator\
桌面\web\JS\back.jpg' 怎样怎么还是不对啊!我还在桌面上做!
桌面\web\JS\back.jpg' 怎样怎么还是不对啊!我还在桌面上做!
//the navigation panel: back, home, and next.
$("<center><table border=0><tr valign=top>");
if (photo_array.length > 1) { $("<td><a class='standard' href='"+prev+"'><img border=0 alt='Previous item' src=E:\web\JS\back.jpg'></a> </td><td></td>"); }
$("<td> <a class='standard' href='"+album_base_path+"'><img border=0 alt='Back to album index' src='E:\web\JS\home.jpg'></a> </td>");
if (photo_array.length > 1) { $("<td></td><td> <a class='standard' href='"+next+"'><img border=0 alt='Next item' src='E:\web\JS\next.jpg'></a></td>"); }
$("</tr></table></center><br>");
$("<center><table border=0><tr valign=top>");
if (photo_array.length > 1) { $("<td><a class='standard' href='"+prev+"'><img border=0 alt='Previous item' src=E:\web\JS\back.jpg'></a> </td><td></td>"); }
$("<td> <a class='standard' href='"+album_base_path+"'><img border=0 alt='Back to album index' src='E:\web\JS\home.jpg'></a> </td>");
if (photo_array.length > 1) { $("<td></td><td> <a class='standard' href='"+next+"'><img border=0 alt='Next item' src='E:\web\JS\next.jpg'></a></td>"); }
$("</tr></table></center><br>");
回复:笨鸟
尝试以下路径:
file:///E|/web/js/home.jpg
以上路径本地预览应当没有问题,但是上传以后无法显示。使用相对路径才会正常显示。
建议你学者用 Dreamweaver 编辑网页。
我已经给你邮箱里发送了我的相册的源码。你可以研究一下。
有问题的话,欢迎留言或者给我发邮件。
尝试以下路径:
file:///E|/web/js/home.jpg
以上路径本地预览应当没有问题,但是上传以后无法显示。使用相对路径才会正常显示。
建议你学者用 Dreamweaver 编辑网页。
我已经给你邮箱里发送了我的相册的源码。你可以研究一下。
有问题的话,欢迎留言或者给我发邮件。
有点启发,只是不知道是不是可以用到论坛或门户的系统上呢?比较奇怪,可以自由贴到新浪博客的自定义组件里,但是却找不到有效地supesite或discuz插件来调用google Picasa的图片,有点可惜。
发表评论
上一篇
下一篇