Google AJAX Feed API - AJAX Slide Show Rolling

AJAX Slide Show 為利用Google AJAX Feed API作出來簡單的應用。允許使用者把 PhotoBucket、 Flickr、Picasa 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

Read More