My studying notebook

2008/07/02

Google AJAX Feed API - AJAX Slide Show Rolling

7/02/2008 07:00:00 PM Posted by Kai-Chu Chung , , , , , 6 comments
AJAX Slide Show 為利用Google AJAX Feed API作出來簡單的應用。允許使用者把 PhotoBucketFlickrPicasa Web Albums的網路相簿以幻燈片的方式嵌在自己的Blog、網站等中。在Slide Show 中Picasa Web Album Feed URL無法動態更改,利用Picasa Web Albums Data API 與 jQurey JSON的操作,即可完成Picasa Web Albums的輪播。


Live Demo
| Download


AJAX Slide Show
<script type="text/javascript">
function load() {
var samples = "http://dlc0421.googlepages.com/gfss.rss";
var options = {
displayTime: 2000,
transistionTime: 600,
linkTarget: google.feeds.LINK_TARGET_BLANK
};
new GFslideShow(samples, "slideshow", options);
}
google.load("feeds", "1");
google.setOnLoadCallback(load);
</script>

var samples 為載入相關的Rss,在Picasa Web Album中都可以訂閱任何一個相簿的Feed。例如訂閱第七屆拼圖馬拉松的Feed(http://picasaweb.google.com/data/feed/base/user/cage.chung/albumid
/5217479087123706369?kind=photo&alt=rss&hl=en_US
)即可將此相簿以Slide Show的方式展示在網頁中。


AJAX Slide Show Advance

scenario
上述的方式,Side Show相簿的Feed為固定的,如果想要展示不同的相簿就必需更改程式碼,這是一件滿煩麻的事情。即然Google公開了Picasa Web Albums Data API,所以我們應該可以使用API搜尋特定user的相簿,以亂數組出Slide Show所需的Feed,達到相簿輪播的效果。

待解決的問題:
  • 選擇Ablum Feed Url
  • 決定Picasa Web Albums Data API回傳資料的格式及接收方式
  • Parser回傳的資料,找出組出Feed最主的資料(Picase Web Album ID)
  • 將亂數選出的Ablum ID帶入AJAX Slide Show

Step1
我們可以要求幾種來自Picase Web Ablum的不同的Feed。依照我們的需求,是搜尋特定user所有公開的相簿,在Picasa Web Albums 搜尋的參數[1]中會使用到kind與access2種參數
  • Kinds指特定類別的參數(ablum、photo、comment、tag、user)在此使用, user
  • Access指定相簿屬性(all、public、private)在此指定user所有公開的相簿, publick
因此,我們Ablum Feed Url則為http://picasaweb.google.com/data/feed/api/user/userID?kind=kinds&Access=publick

Step2
由於 AJAX 程式中的 XMLHttpRequest 只能呼叫同一個 domain 下的 URL,所以呼叫遠端並回傳XML資料型態的資料會以安全性考量被拒絕存取。又因為Picasa Web Albums資料格式提供另一種輕量級的資料交換格式(JSON),只有在Feed Url中指定alt=json即可將XML資料格式轉換成JSON格式並回傳。

選定遠端資料回傳格式為JSON,剩下的就是本機端該如何接收JSON型態資料。在此使用了一個新形態的 JavaScript程式庫(jQuery),程式庫中可以直接使用 jQuery.getJSON( url, [data], [callback][2] 操作JSON並進行AJAX回呼。此時的Ablum Feed Url更改為http://picasaweb.google.com/data/feed/api/user/cage.chung?kind=album&access=public
&alt=json&callback=?


Step3
剩下的部份就是Parser回傳的JSON資料
var numentries = json.feed.entry.length; //每一個相簿都是單獨的entry,numentries則為相簿的數量
var rNum = Math.floor(Math.random() * numentries); //以Random選擇相簿
var item = json.feed.entry[rNum];

var title = item.title.$t; //相簿的標題
var summary = item.summary.$t; //相簿的說明
var id = item.gphoto$id.$t; //最主要的相簿ID


Step4
將亂數選出的Ablum ID帶入AJAX Slide Show var samples 字串中即可




整合之後的Script 如下
<script type="text/javascript">
function load() {
$.getJSON("http://picasaweb.google.com/data/feed/api/user/<span style="
font - weight: bold;
">USERID</span>?kind=album&access=public&alt=json&callback=?", function(json) {

var numentries = json.feed.entry.length;
var rNum = Math.floor(Math.random() * numentries);
var item = json.feed.entry[rNum];

var title = item.title.$t;
var summary = item.summary.$t;
var id = item.gphoto$id.$t;

if (summary.length > 0) $("#msg").html("<h4>" + title + "</h4><p>" + summary + "</p>");
else $("#msg").html("<h4>" + title + "</h4>");

var samples = "http://picasaweb.google.com/data/feed/api/user/<span style="
font - weight: bold;
">USERID</span>/albumid/" + id + "?kind=photo&alt=rss&hl=en_US";

var options = {
displayTime: 2000,
transistionTime: 600,
linkTarget: google.feeds.LINK_TARGET_BLANK,
scaleImages: true
};
new GFslideShow(samples, "slideshow", options);
});
}
google.load("feeds", "1");
google.setOnLoadCallback(load);
</script>




Reference
  1. Interacting with Picasa Web Albums
  2. you can load JSON data located on another domain if you specify a JSONP callback, which can be done like so: "myurl?callback=?". jQuery automatically replaces the ? with the correct method name to call, calling your specified callback. Or, if you set the dataType to "jsonp" a callback will be automatically added to your Ajax request.
  3. Projection values: Feed URL "api" 與 "base"的差別,api參數提供了gphoto相關元素(包括我們需要的album id)
base
api