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

image

圖片放置於 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/),拉到底下:

image

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

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

image

範例

點選這裡看範例

有任何問題歡迎討論

留言

  1. 作者已經移除這則留言。

    回覆刪除
  2. 吉米大您好有幾個燈箱的問題想請教您
    請問這個方法一定要載入Google JSAPI才可以用嗎?
    因為我去連結中(申請key那篇) 三個連結都不能申請了
    它目前指示我去的地方 跟您po的照片內容差異有點大 不知道該如何申請
    能否麻煩您抽空幫我看一下呢?

    第二個問題是 就是這篇上述的code的放置位置 能否請您跟我說明具體位置放在哪
    EX. < head >< /head >之間 還是< /skin >之前 等等之纇...
    因為我不了解CSS與html語法 剛碰blogger沒多久而已ˊˋ
    我把上述的code放到html中 雖然沒有compile錯誤 但也什麼都沒出現
    另外若是這個slider想要放置的位置不一樣
    像您的好文精選放在首頁 跟 範例是在文章中 又該如何處理這串code呢?

    不好意思問了一大串 希望您有空能幫我解答 感激不盡!

    回覆刪除
  3. Re: Poki <5079983649860951024>
    問題一:上面這支因為用了 google.load,要載入 jsapi,但不一定要申請 key,可直接用 < script type="text/javascript" src="http://www.google.com/jsapi" >。

    問題二:< head > < /head > 之間

    回另外:首頁的那塊精選輪播你必須從範本那邊去改[但那段跟現在這支不一樣];如果你要放在文章中,就用後台寫文章,只是切換到 HTML Mode,把 Code 貼進去

    回覆刪除
  4. 謝謝吉米大,我會在試試的!!!
    另外一直想跟你說你的blog真的很讚 :)

    回覆刪除

張貼留言

回應不用錢,請多多益善!懶得寫字按個讚也是相當感謝!

這個網誌中的熱門文章

[古典相機] 巧緻實用的簡單精神.Nikon FE.1978

有點誇張的準專業機.Minolta Alpha 7 (Dynax 7、Maxxum 7).2000

在 Excel 裡轉換 Unixtime 格式

[中判相機] 開始 120 吧.Pentax 6x7.1969

[連動測距相機] Yashica Electro 35 GSN.1973