<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>外部取picasa网络相册</title>
<script>
var XMLHttpReq;
var albums = []; //所有的相册
var userName = ""; //picasa用户名
var img_small = 144; //缩略图尺寸，其他的有效尺寸: 32, 48, 64, 72, 144, 160;
var img_max = 1024; //每张图片的尺寸，其他的有效尺寸: 200, 288, 320, 400, 512, 576, 640, 720, 800
var max_results = 20; //一页显示的相片个数
var navigae_page = 1; //url参数表示当前从第几个查询
var current_page = ""; //当前页
/**
* 创建AJAX请求
* @return 请求对象
*/
function createXMLHttpRequest()
{
if(window.XMLHttpRequest)
{
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
try
{
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
}
}
}
}
function createDomDocument(obj)
{
var xmlData;
try
{
xmlData = createObject("Msxml2.DOMDocument");
}
catch(e)
{
xmlData = createObject("Msxml.DOMDocument");
}
xmlData.async = false;
xmlData.loadXML(obj);
return xmlData;
}
function createObject(strName)
{
var stm;
try
{
stm = new ActiveXObject(strName);
}
catch(e)
{
var strMsg = "您的计算机没有安装" + strName + "，或者您的浏览器为该网页没有设置本地访问权限";
throw strMsg;
}
return stm;
}
function load()
{
userName = "blair";
var url = 'http://picasaweb.google.com/data/feed/api/user/'+ userName +'?category=album&max-results=30&alt=json';
createXMLHttpRequest();
XMLHttpReq.open("get",url,true);
XMLHttpReq.onreadystatechange = function()
{
if(XMLHttpReq.readyState==4)
{
if(XMLHttpReq.status == 200)
{
//document.write(XMLHttpReq.responseText);
//parseAlbumFeed(XMLHttpReq.responseText);
if(XMLHttpReq.responseText == '')
{
alert('没有相册!');
}
parseAlbumJson(XMLHttpReq.responseText);
}
}
}
XMLHttpReq.send(null);
}
function parseAlbumFeed(obj)
{
var doc = createDomDocument(obj);
var entryElements = doc.getElementsByTagName('entry');
//具体处理每个Album的信息
for (var i = 0; i < entryElements.length; i++)
{
var entry = entryElements[i];
var album=new Album();
//相册标题
album.title=entry.getElementsByTagName('title')[0].text;
//相册描述
album.summary=entry.getElementsByTagName('summary')[0].text;
//相册的访问权限
album.access=entry.getElementsByTagName('gphoto:access')[0].text;
//相册的缩略图
var thumbnail=entry.getElementsByTagName('media:thumbnail')[0];
album.thumbnail=new Thumbnail(thumbnail.getAttribute('url'));
albums.push(album);
}
for(var i=0; i<albums.length; i++)
{
var album = albums[i];
alert(album.title + ", " + album.summary + ", " + album.access + ", " + album.thumbnail.url);
}
}
function parseAlbumJson(obj)
{
var func = new Function("return "+obj);
var json = func();
var album=new Album();
var str = "";
for(var i=0; i<json.feed.entry.length; i++)
{
album.title =json.feed.entry[i].title.$t;
album.desc = json.feed.entry[i].summary.$t;
album.access = json.feed.entry[i].gphoto$access.$t
album.date = json.feed.entry[i].gphoto$timestamp.$t;
var c = new Date();
c.setTime(album.date);
album.date = c.toLocaleDateString() + " " +c.toLocaleTimeString();
album.num = json.feed.entry[i].gphoto$numphotos.$t;
album.src = json.feed.entry[i].media$group.media$thumbnail[0].url;
album.id = json.feed.entry[i].gphoto$id.$t;
albums.push(album);
str += "<a href=javascript:void(0) onclick=getAlbum('" + album.id + "',1" + ")><img src=" + album.src + "?imgmax=" + img_small + "&crop=1 border=0 style='margin:20px;'/></a>";
//document.write(album.id + " ");
//alert('相册标题: '+album.title + '\n相册描述: '+ album.desc + '\n相册权限: '+ album.access + "\n相册日期: "+ album.date + '\n相片个数: ' + album.num + '\n相册封面: ' + album.src + '\n相册ID: ' + album.id);
}
document.getElementById("album").innerHTML = str;
}
function Album()
{
this.title = "";
this.summary="";
this.access="";
this.thumbnail="";
}
function Thumbnail(url)
{
this.url = url;
this.width = 80;
this.height = 80;
}
function getAlbum(albumid, newPage)
{
if (current_page == newPage)
{
return;
}
current_page = newPage;
navigae_page = ((current_page - 1) * max_results) + 1;
var url = 'http://picasaweb.google.com/data/feed/api/user/' + userName + '/albumid/' + albumid + '?category=photo&max-results='+ max_results +'&start-index='+ navigae_page +'&alt=json';
createXMLHttpRequest();
XMLHttpReq.open("get",url,true);
XMLHttpReq.onreadystatechange = function()
{
if(XMLHttpReq.readyState==4)
{
if(XMLHttpReq.status == 200)
{
var func = new Function("return " + XMLHttpReq.responseText);
var json = func();
display(json,albumid);
}
}
}
XMLHttpReq.send(null);
}
function display(j,albumid)
{
var img_sum = j.feed.openSearch$totalResults.$t;
var album_title = j.feed.subtitle.$t;
var album_date = j.feed.gphoto$timestamp.$t;
var c = new Date();
c.setTime(album_date);
album_date = c.toLocaleDateString() + " " +c.toLocaleTimeString();
var len = j.feed.entry.length;
//分页
var page = "";
var pageCount = (img_sum / max_results);
var ppage = "上一页 | ",
npage = "| 下一页";
if (current_page > 1)
{
ppage = "<a href=javascript:void(0) onclick=getAlbum('" + albumid + "'," + (parseInt(current_page) - 1) + ")>上一页</a> | ";
};
if (current_page < pageCount)
{
npage = "| <a href=javascript:void(0) onclick=getAlbum('" + albumid + "'," + (parseInt(current_page) + 1) + ")>下一页</a>";
};
page += ppage + "page";
for (var i = 1; i < pageCount + 1; i++)
{
if (i == current_page)
{
page += "<b>[" + (i) + "]</b>";
}
else
{
page += "<a href=javascript:void(0) onclick=getAlbum('" + albumid + "'," + i + " )>" + (i) + "</a>";
};
};
page += npage;
//alert(img_sum + ", " + album_title + ", " + album_date + ", " + len);
var str = "";
for(var i=0; i<len; i++)
{
var img_src = j.feed.entry[i].content.src;
var img_id = j.feed.entry[i].gphoto$id.$t;
var img_desc = j.feed.entry[i].summary.$t;
var img_date = j.feed.entry[i].exif$tags.exif$time ? j.feed.entry[i].exif$tags.exif$time.$t : j.feed.entry[i].published.$t;
//alert(img_src + ", " + img_id + ", " + img_desc + ", " + img_date);
str += "<a href=" + img_src + "&crop=0 target=_blank title=" + img_desc + "><img src=" + img_src + "?imgmax=" + img_small + "&crop=1 border=1 style='margin:20px;' /></a>";
}
var slideshow = "<a href='http://picasaweb.google.com/" + userName + "/" + j.feed.gphoto$name.$t + "/photo#s" + j.feed.entry[0].gphoto$id.$t + "' rel='gb_page_fs[]' target='_new'>View as slideshow</a>";
document.getElementById("album").style.display = "none";
document.getElementById("slideshow").innerHTML = slideshow;
document.getElementById("img").innerHTML = str;
document.getElementById("page").innerHTML = page;
}
</script>
</head>
<body onload="load()">
<div id="album"></div>
<div id="slideshow"></div>
<div id="img"></div>
<div id="page"></div>
</body>
</html>
分享到：
- 2009-05-04 20:33
- 浏览 1592
- 评论(0)
- 论坛回复 / 浏览 (0 / 2207)
- 查看更多
相关推荐
一个简单的Google相册，正式用于Node.js（> = 4.8.7）的Picasa网络相册客户端（2.0）。 包括Auth助手。安装$ yarn add picasa或者$ npm install --save picasa用法const Picasa = require ( 'picasa' )const picasa ...
Picasa是由Google提供的免费网络相册服务，用户可以上传图片并分享给他人。然而，手动获取一个一个的相册外链会非常费时。作者提到了Picasa的一个不足，即获取外链的过程太过繁琐。为了解决这一问题，作者开发了一个...
标题中的“use pwa to access Google picasaweb”指的是使用渐进式Web应用程序（Progressive Web App，简称PWA）来访问Google的Picasa网络相册服务。Picasa是Google提供的一款在线照片管理和分享应用，而PWA则是一种...
技术性picasa-light使用Picasa网络相册数据API在Sinatra的顶部构建。 每次通过Javascript逐步加载图片，以免干扰查看器的浏览器，每次加载4张图片。 该界面的灵感来自。 我使用CSS仅在“活动”图片上显示细节，并...
通常，我们会通过CDN（内容分发网络）链接来获取最新版本的jQuery库。在`<head>`标签内添加以下代码： ```html <script src="https://code.jquery.com/jquery-latest.min.js"> ``` ### 3. HTML结构 创建一个简单...
＃迈克·奥索里奥（Mike Osorio），Galvanize DSI（fka Zipfian Academy），2015年4月13日-2015年7月10日## ... ##代码演练###预处理#### scrapingImages.py 该模块从Picasa网络相册中抓取了针对不同欧洲艺术家的
13. Pimax插件：Pimax插件可以从用户的Picasa/Google+相册中显示照片库，将公开专辑中的图片展示在网站上。这一功能有助于增强网站的内容丰富度和社交互动性。 14. FloatShare插件：FloatShare是一个免费的jQuery...