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