2008年2月9日 星期六

在Blogger加入自動播放的下拉選單Picasa網路相簿

我blog上面有個自動播放的下拉選單網路相簿,是之前在某處,看到網友的好創意,運用Picasa網路相簿本身內建的自動播放。不過網頁初次載入時是空白的,必須下拉選擇相簿後才會出現自動播放。於是稍微研究了一下,瞭解修改自訂預設相簿的方式,就會一開始就有相簿會跑。

方法如下:
首先到自己的Picasa網路相簿,進入打算當作預設播放的相簿,在左側「上載相片」的連結上按滑鼠右鍵,複製捷徑。
複製到的捷徑應該長得像這樣:「http://picasaweb.google.com/lh/webUpload?uname=你的Google帳號&aid=1234567890123456789」,在「aid=」後面出現的那串數字,就是這個相簿的ID,把它複製起來。

接下來,把下面這段碼最後的「你的預設相簿ID放這」取代為剛剛複製到的相簿ID數字串,然後把所有「你的Google帳號放這」改成你的英數字Google帳號。

<script>
var flashstring='<embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="288" src="http://picasaweb.google.com/s/c/bin/slideshow.swf" height="192" flashvars="host=picasaweb.google.com&captions=1&RGB=0x000000&feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2F你的Google帳號放這%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 firstlink='';
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");
if(i==0){
firstlink=link;
}
temp += '<option value="'+link+'">'+title +'</option>';
}
temp+="</select>";
document.writeln(temp);
writeflash(firstlink);
}
</script>

<script src="http://picasaweb.google.com/data/feed/base/user/你的Google帳號放這?kind=album&hl=en_US&access=public&alt=json&callback=listallalbum"></script>

<div id="picasaweb">
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="288" src="http://picasaweb.google.com/s/c/bin/slideshow.swf" height="192" flashvars="host=picasaweb.google.com&captions=1&RGB=0x000000&feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2F你的Google帳號放這%2Falbumid%2F你的預設相簿ID放這%3Fkind%3Dphoto%26alt%3Drss" type="application/x-shockwave-flash"></embed></div>

最後,登入Blogger,加入「HTML/JavaScript」類的「網頁元素」,把上面改好的碼貼入,然後取個標題,決定頁面擺放位置(建議上面一點),就大功告成了。以後要改預設相簿,一樣找到相簿ID後去把碼修改一下即可,相簿大小也可以自己調整。