« 李开复先生有关性格的看法建国以来中国汽车产量统计 »

外部网页调用用Google Picasa网络相册的图片

外部网页调用用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>

对以上代码做几点说明:
username要更改成你自己的的Picasa相册的帐户名称,比如我的Picasa相册的地址是http://picasaweb.google.com/shenyang2007,那么我的Picasa帐户名称就是shenyang2007.
photosize控制每一张图片在显示的时候的尺寸大小,推荐使用800。
columns定义相册缩略图的列数,你可以根据网页大小定义。
下面具体介绍一下外部网页调用用Google Picasa网络相册的图片的方法:
首先,是要获得自己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

如果您对本文感兴趣,欢迎点此订阅订阅博客内容

  • quote 3.finder
  • http://www.find321.cn
  • 我用sv相册插件。
    春泥博客 于 2008-3-29 0:30:14 回复
    你用的插件也很好啊。
    finder 于 2008-3-29 20:18:00 回复
    你的也不错,也用了。
  • 2008-3-29 20:18:00 回复该留言
  • quote 6.浪痕
  • http://www.cccos.cn
  • 谢谢你!我用你提供的办法搭建成功了!用IE浏览确实有问题,网页编码换了也不行,后来把js的编码也换了才成功...(utf-8)Haha
    春泥博客 于 2008-5-4 21:37:31 回复
    嗯,恭喜啦。
  • 2008-5-4 21:37:31 回复该留言
  • quote 7.xiangyun
  • 姐姐,我的相册不显示名称,是英文的,但是就是不显示名称,不知道为什么?求救!
    http://picasaweb.google.com/god.customers
    QQ:409187655
    请各位路过的高手救救我的PP!谢谢!
  • 2008-5-20 1:47:31 回复该留言
  • quote 8.春泥博客
  • @@ xiangyun

    你好,你先要登录 Google帐户,转到 Picasa 相册,然后进入其中的的一个相册。然后点击“修改相册属性”,修改相册的名称就可以了。

    你是不是也要搭建一个像http://www.shiyimin.com.cn/album/一样的相册啊?

    我可以帮你啊。

    gary 于 2009-3-27 2:06:39 回复
    在我用“修改相册属性”功能时,网页会自动关闭。试了无数次,每次都是一样结果,请问您知道是什么原因吗?谢谢!
    春泥博客 于 2009-3-27 7:55:57 回复
    我从来没遇到这种情况,大概是系统的问题。我也不太确定。
  • 2009-3-27 7:55:57 回复该留言
  • quote 10.graceshot
  • 你的相册制作得很不错。

    为什么我用上面的方法在wordpress博客里面弄出来的相册只能显示相册封面,但是点击之后无法进入相册呢?
  • 2008-6-3 20:54:43 回复该留言
  • quote 13.笨鸟
  • 老大 问你下 我嵌入进去后 点开了 相册的按钮和路径都是英文的怎么改啊!!?????
  • 2009-3-6 18:48:31 回复该留言
  • quote 14.春泥博客
  • 回复:笨鸟

    你在pwi.js里面查找 back.jpg 和 home.jpg 和 next.jpg ,然后修改 这几张图片的地址就可以。

    还有问题的话,可以给我发邮件:

    shi#######shiyimin.com.cn
  • 2009-3-7 0:45:30 回复该留言
  • quote 15.杉杉
  • http://www.wangliyun.com.cn/
  • 其实ZBLOG现在有了PICASA的像册插件了 ,我现在就在用,不过问题是我们现在是8个人用一个博客,想一个人搞一个PICASA像册加到 ZBLOG里 修改了下插件没搞定,你这个手工的也许可以弄一弄 呵呵
  • 2009-3-10 10:15:26 回复该留言
  • quote 16.笨鸟
  • 你说的pwi.js是不是就是pwa.js哦??我找到了图片但是没有找到他的地址
  • 2009-3-20 0:52:11 回复该留言
  • quote 18.笨鸟
  • src='C:\Documents and Settings\Administrator\

    桌面\web\JS\back.jpg' 怎样怎么还是不对啊!我还在桌面上做!
  • 2009-3-20 14:55:57 回复该留言
  • quote 19.笨鸟
  • 我是把图片放在左面和pwa.js文件同一个文件夹里面的
  • 2009-3-20 15:05:28 回复该留言
  • quote 20.笨鸟
  • 上面有中文 后来我把 这个网页的文件都放到E盘下了 但是设了路径还是不可以!
  • 2009-3-20 15:11:33 回复该留言
  • quote 21.笨鸟
  • //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>");
  • 2009-3-20 15:13:30 回复该留言
  • quote 22.笨鸟
  • 我郁闷咯!你还没来!我去上班去了哈!要不邮箱联系也可以!panchao1134@qq.com
    非常感谢!
  • 2009-3-20 16:45:41 回复该留言
  • quote 23.春泥博客
  • http://www.shiyimin.com.cn/
  • 回复:笨鸟

    尝试以下路径:

    file:///E|/web/js/home.jpg

    以上路径本地预览应当没有问题,但是上传以后无法显示。使用相对路径才会正常显示。

    建议你学者用 Dreamweaver 编辑网页。

    我已经给你邮箱里发送了我的相册的源码。你可以研究一下。

    有问题的话,欢迎留言或者给我发邮件。
  • 2009-3-20 21:48:29 回复该留言
  • quote 27.辰辰
  • 有点启发,只是不知道是不是可以用到论坛或门户的系统上呢?比较奇怪,可以自由贴到新浪博客的自定义组件里,但是却找不到有效地supesite或discuz插件来调用google Picasa的图片,有点可惜。
  • 2010-2-6 9:12:13 回复该留言

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表

版权所有 春泥博客 www.shiyimin.com.cn 2007 联系站长:shi#shiyimin.com.cn All Rights Reserved.

Powered By Z-Blog