image
Google公司對於API的開發與開發人員的技術支援一向不遺餘力，
在Google Code這個專門發佈技術訊息的網站中，
我找到一個GFslideShow的函式，
透過簡單的程式碼撰寫，
就可以在任何允許JavaScript的網頁上，
以投影片的方式播放Picasa網路相簿中的圖片。
image
Google將GFslideShow的說明文件公佈在以下網址中：
http://www.google.com/uds/solutions/slideshow/reference.html ，
有興趣的朋友可以直接連過去研究。
基本上GFslideShow應該是延續Google AJAS Feed API的延伸功能函式，
所謂Feed是一種傳遞訊息格式，
網站可以透過這種格式將資訊傳遞出去。
一般常在部落格中常見的RSS就是Feed的其中一種體現。
image
GFslideShow可以將Feed中的圖片資訊以投影片的方式播放，
剛好Picasa網路相簿本身就有提供RSS的功能。
(網路上的相簿有不少提供RSS訂閱的功能，
除了Picasa外，Flickr亦有提供。)
image
要取得Picasa網路相簿的RSS位置，
只要進入相簿頁面後，
點擊右方的【RSS】字樣就可以取得。
image
接著打開文字編輯器，
輸入以下程式碼載入Google API函式庫。

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js" type="text/javascript"></script>

接著輸入以下程式：
<script type="text/javascript">
  var ss;
  function LoadSlideShow() { //主函式
    var feed  = "填入相簿的RSS位置";
    //透過options可以指定slideshow的屬性，甚至可以自訂按下圖片後所執行的功能
    var options = {
        displayTime:5000, 
        transistionTime:100, 
        scaleImages:true,
        imageClickCallback : myClickHandler
        };
    //建立GFslideShow物件
    ss = new GFslideShow(feed, "slideShow", options);
  }
  //自訂按下圖片後所執行的功能
  function myClickHandler(entry) {
    //打開新的視窗連結到圖片title欄位指定的網址
    window.open(entry.title);
    //繼續播放投影片
    ss.resumeSlideShow();
  }
  //載入Google feeds 版本1的API
  google.load("feeds", "1");
  //載入頁面時所呼叫的函式
  google.setOnLoadCallback(LoadSlideShow);
</script>


最後輸入div來指定顯示slideShow的位置即可。

<div id="slideShow" class="gss">Loading</div>

當然，我們也可以用CSS讓這個slideShow更美觀。

<style type="text/css">
    .gss a img {border : none;}
    .gss {
      width: 150px;
      height: 200px;
      color: #dddddd;
      background-color: transparent;
    }
</style>

Technorati 的標籤：,,,,,,,
arrow
arrow
    全站熱搜

    賽拉維‧柯南 發表在 痞客邦 留言(2) 人氣()

    E-mail轉寄