[Google AJAX API] 利用 Google API 寫一個 Flickr 圖片的幻燈播放

圖片放置於 Flickr，這裡會用到 GFslideShow 來產生幻燈播放，以及 Feed 來解析 RSS。

若使用 Picasa 圖床的範例請直接參考：http://www.google.com/uds/solutions/slideshow/reference.html，這裡特別提 Flickr 是因為 Flickr 預設的 Thumbnail 是 75x75，如果要抓大圖的話可以參考底下的作法。

底下的原始碼，必須在載入 Google JSAPI 之後才有用，請參考：[Google AJAX API] 如何開始使用 (申請 API Key)。

<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js" type="text/javascript"></script>
<script type="text/javascript">
/**
*
* Flickr thumbnail fixer by trucknut
*/
function GetURLFullSize(entry)
{
var content = entry.content;
var start = content.indexOf("<img src=")+10;
var stop = content.indexOf(".jpg",start)+4;
var thumburl = content.substring(start,stop);
thumburl=thumburl.replace("_m","_d");
/*
Possible Sizes:
_s = 75x75 square
_t = 100 wide
_m = 240 wide
_d = 500 wide
_b = 1024 wide
_o = original file *must be coded differently
*/
return(thumburl);
}
function LoadSlideShow() {

var feed = "YOUR FLICKR RSS FEED HERE";

var options = {
displayTime:2000,
transistionTime:600,
scaleImages:true,
fullControlPanel : true,
fullControlPanelSmallIcons : true,
linkTarget : google.feeds.LINK_TARGET_BLANK,
thumbnailUrlResolver : GetURLFullSize };

var ss = new GFslideShow(feed, "slideShow", options); }

google.load("feeds", "1");
google.setOnLoadCallback(LoadSlideShow);
</script>

<div id="slideShow">Wait fot Loading...</div>

<style>
#slideShow {
  width : 500px;
  height : 333px;
  padding : 2px;
  margin: 0 auto;
}
</style>

程式碼說明一

thumburl=thumburl.replace("_m","_d");

後面的 _d 可以替換成 _b (寬1024px) 等等，視你要顯示多大的幻燈播放，這裡是用 500px，所以是把原本結尾為 _m 的圖片網址，取代為 _d 為結尾的圖片網址。

深入了解 Flickr 圖片的格式：http://www.flickr.com/services/api/misc.urls.html。

程式碼說明二

var feed ="YOUR FLICKR RSS FEED HERE";

在括號內貼入你的 FLICKR RSS FEED 位址，你的 FLICKR RSS 可以參考底下的方式找到：

在你的 FLICKR 個人所有內容那一頁 (http://www.flickr.com/photos/YOURID/)，拉到底下：

「最新的」那個連結就是了。

另外如果你要播放的是你的相片集，則進到你的某個相片集，一樣拉到底下就看到了：

範例

點選這裡看範例

有任何問題歡迎討論