2007/12/07

http://jinyaolin.blogspot.com/2007/12/bloggerpicasa-flash.html

在Blogger裡面內嵌Picasa Flash播放選台器



***修正***
目前版本可以預設播放最新相簿。請大家重新下載修改後即可。
*********
我使用的是免費的Picasa Web相本,並透過Picasa的embed flash來把照片相簿放置在右邊的側欄裡面。但是,隨著相簿越來越多,到底應該放哪一本相簿,則變成了非常頭痛的問題。

於是今天晚上突發奇想,希望做一個可以從PicasaWeb撈出相簿資料,並透過flash播放的機制。所以就完成了如右圖的功能。一個Picasa Web相簿的播放選台器。

直接在右方的下拉式選單選取想要看的相簿,立刻就會轉到想看的相本那裡,非常的方便。

作法則是將下列程式,修改紅色部分變成你的相簿名稱,最後貼到HTML/JavaScript的元素元件裡面就可以了。

<div id="picasaweb">
</div>
<script>
var flashstring='<embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="288" src="http://picasaweb.google.com.tw/s/c/bin/slideshow.swf" height="192" flashvars="host=picasaweb.google.com.tw&captions=1&RGB=0x000000&feed=http%3A%2F%2Fpicasaweb.google.com.tw%2Fdata%2Ffeed%2Fapi%2Fuser%2Fjinyao.lin%2Falbumid%2F##ALBUMID##%3Fkind%3Dphoto%26alt%3Drss" type="application/x-shockwave-flash"></embed>';

function writeflash(albumid){
flashstring1=flashstring.replace("##ALBUMID##",albumid);
document.getElementById("picasaweb").innerHTML=flashstring1;
}

function listallalbum(json) {
var temp = '<select onchange="writeflash(this.options[this.selectedIndex].value)">';
var sortentry=json.feed.entry;
for (var i=0, post; post = sortentry[i]; i++) {
var title = post.title.$t;

var link = post.link[2].href.replace(/(^.*albumid\/)(.*)(\?.*$)/g,"$2");
temp += '<option value="'+link+'">'+title +'</option>';
}
temp+="</select>";
document.writeln(temp);
}

</script>

<script src="http://picasaweb.google.com.tw/data/feed/base/user/jinyao.lin?kind=album&hl=en_US&access=public&alt=json&callback=listallalbum"></script>

26 意見:

Jean Yan 提到...

堯大哥,
我在我的blog上用了相簿輪播
但是只有選項
下面的圖卻沒出來
為什麼?

Jinyao Lin 提到...

我是有預設放了一本相簿。所以一開始就會出來我想播的。另外在上方還有一段要修改的,總共要修改兩個地方。

Jean Yan 提到...

請問要如何設預設呢?
我的現在出來要選了才會有..

石先生 提到...

你好,我是香港的。很可惜我不會用呀。我己經試過轉一些碼了,但是還是沒有辨法,可以幫我一下嗎?
http://picasaweb.google.com.hk/stoneip
stoneip@gmail.com

Zach 提到...

謝謝,但是有一個問題:當我選擇播放另一本相簿後,再重新載入網頁,它仍會播放預設的相簿,但上方的選單顯示著上次的相簿而非預設相簿的名稱。

ohha 提到...

看到你願意提供這個播放器語法,真是太感謝了!晚點就來試看看!

Tony Huang 提到...

超棒的喔~

1. 可不可以預設第一個(最新)相簿呢?
2. 一本相簿撥完可以自動撥下一本嗎?

第二點我猜可能比較麻煩。。。
謝謝你

魔法小束兒 提到...

請問要如何預設第一本相本呢^^
你好棒~謝謝你唷

Samson's Family Blogger 提到...
作者已經移除這則留言。
Samson's Family Blogger 提到...

版主你好:
在我的blog上用了相簿輪播
也照了你的指示,改了2個地方,
但是只有選項下面的圖卻沒出來
為什麼?
可煩請大大再給予指點一下嗎?

歪哥 提到...

版大您好:
我有試著要用預設相簿,可是一直都沒辦法!
不知道版大預設相簿是要修改哪個地方呢?!

提到...

請問我直接內嵌picasa web照片在blog上,為甚麼未有藍框出現,這個可以取消嗎?

A. HSIANG 提到...

你好 謝謝你ㄉ分享
不過我ㄉ相簿在部落格播放時遇到直的照片都會變得很小 請問為什麼?
要如何克服呢?? 謝謝

Jinyao Lin 提到...

請問是變的跟我的一樣左右縮嗎?
如果是的話就沒辦法了。
否則就是檢查一下檔案是不是正常。

Hello Kitty 提到...

為什麼我的只有選項
相簿不會自動播?
如何預設第一本相簿呢?
謝謝!!

Tony Huang 提到...

之前來這裡借了大大的Code,好用極了,後來人家問我怎麼弄的,找了一番才找回到這兒,發現堯大哥可能沒空回答大家預設相簿的問題,所以斗膽推薦想修改預設相簿的網友,可以去看看我寫的說明。如有錯誤或不足請不吝指教,謝謝。

Hello Kitty 提到...

I figure out!
Thank you for your code.

peter 提到...

顯示時間可以控制嗎
請問要改哪裡,謝謝!

Richard 提到...

你好~我依照你的程式碼輸入,可是一直無法儲存,那都一直顯示 saving...
然後就停住了,然後狀態列下就出現以下錯誤訊息??
message (1) failed with response -1 null after 270 ms.
請問這是什麼原因啊??

Jinyao Lin 提到...

應該是Blogger的問題。
等一下再試看看如果還不行,就報Blogger維修看看。

Richard 提到...

我成功了!!
但有另一個問題,我要如何控制下面選擇相簿欄位的長短,因為圖片的大小可此自己控制,但是下面的欄位就不行,我安裝後發現下面欄位的長度已經超出了我的邊界

Richard 提到...

還有一個稕提就是我載入的時候相本還是不能預設撥放,不能向版大這樣,我完整拷貝你的程式碼,並且有照你的方式改2個地方(帳號),可是還是沒辦法預設撥放,必須要先選才能放.

寂川雨xavier 提到...

感謝你的教學,我有把這篇連結到我的blog,只有連結,沒有整篇文章,如有造成困擾,我會把他刪除。http://box-design.blogspot.com/2008/08/blogger-hack.html

神魂顛倒 Flash2u 提到...

你公布的跟你用的稍有差距啦

用你這段就OK了,會自動取最新的相簿,且立即開始播放

更正一下吧

SeeWhy 提到...

林大哥,能否告知代碼框是怎么做出來的?

Jinyao Lin 提到...

用CSS做的。
然後包在code tag裡面。

 
Blogger Template Layout Design by [ METAMUSE ] : Code Name Gadget 1.1