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

垃圾文章凑合着看很一般还不错精品 (暂时没有评价)
Loading ... Loading ...

单张图片调用可以直接使用地址,假如想调用相册呢?我们该怎么办?

方案一:调用JS代码

  1. <script type="text/javascript">
  2. username="你的Picasa帐户名称";
  3. photosize="800";
  4. columns="4";
  5. </script>
  6. <script type="text/javascript" src="http://www.shiyimin.com.cn/album/pwa.js"></script>

username要更改成你自己的的Picasa相册的帐户名称,比如我的Picasa相册的地址是http://picasaweb.google.com/kele5240,那么我的Picasa帐户名称就是kele5240.
photosize控制每一张图片在显示的时候的尺寸大小,推荐使用800。
columns定义相册缩略图的列数,你可以根据网页大小定义。

你可以把http://www.shiyimin.com.cn/album/pwa.js下下来做相应的修改。他里面用到的图片
next.jpg
back.jpg
home.jpg
他里面有个地方写的是作者的名字Album,你可以进去看下JS代码修改下名字。还有Album Home这个字段。我本地测试了下可以使用

方案二:使用Google的API链接
要使用Google API你还必须要有先要 注册一个API帐号Sign up for an API key
然后修改下面的代码

  1. <script src="http://www.google.com/jsapi/?key=你申请的API KEY" type="text/javascript"></script>
  2. <script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js" type="text/javascript"></script>
  3. <style type=text/css>
  4. .gss A IMG {
  5. BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
  6. }
  7. .gss {
  8. WIDTH: 300px; COLOR: #dddddd; HEIGHT: 300px; BACKGROUND-COLOR: #FFFFFF
  9. }
  10. </style>
  11. <script type=text/javascript>
  12.   function load() {
  13. var feed  = "你的RSS地址例如:http://picasaweb.google.com/data/feed/*******";
  14. var options = {
  15. displayTime: 2000,
  16. transistionTime: 600,
  17. numResults : 50,
  18. scaleImages : true,
  19. maintainAspectRatio : true,
  20. thumbnailSize : GFslideShow.THUMBNAILS_LARGE ,
  21. linkTarget : google.feeds.LINK_TARGET_BLANK
  22. };
  23. new GFslideShow(feed, "slideshow", options);
  24.   }
  25. google.load("feeds", "1");
  26. google.setOnLoadCallback(load);
  27. </script>
  28. <div class=gss id=slideshow>正在读取相片..</div>

代码简单说明:
1 修改这一句 WIDTH: 300px; COLOR: #dddddd; HEIGHT: 300px; BACKGROUND-COLOR: #FFFFFF 可以改变这个板块的大小与背景颜色。
2 displayTime: 2000, 控制每张照片的显示时间
3 transistionTime: 600, 控制照片之间的过度时间
4 numResults : 50, 控制显示照片的数量
本地测试可行~

其他人看了什么:

可乐发表于:04-29-08

看完了说点啥?