2007年2月28日 星期三

配合 Xuite 提供的秀圖機所做的隨機相簿輪播

最近 Xuite 的相簿開放了秀圖機功能,個人感覺還蠻實用的,但是似乎還沒有辦法隨機選擇相簿來秀圖,是令人有點失望的部分,我使用了 JavaScript 撰寫了一小段簡單的程式碼來達到這樣的功能。

先決條件是你要放置的網站支援自訂 HTML 及 Javascript(通常會稱為自由欄位),並且支援 iframe 語法,我所使用的 Blogger 就支援這些功能。

這個功能需要手動新增,也需要您有一些修改 Javascript 的基礎:

1.先記下你的相簿編號(每一本相簿絕對都會對應一個唯一的編號)
點圖放大看說明



2.修改下列程式碼,然後貼到你的網站上。
要如何修改呢?一共有幾個地方:


A.請修改相簿編號及其對應的相簿名稱:
藍色的字是相簿編號,綠色的字是你替該相簿所取的名稱,請依照順序對應。
例:album_id 的相簿編號請對應 album_name 的相簿名稱,以此類推。

如果相簿太多,欄位不夠用,或是相簿比較少,欄位太多,請依照需要自己新增或刪除,也請依照順序編號。

B.請修改程式碼裡紅字的地方,改成你的 Xuite 會員帳號。

C.最重要的是:
如果你放置了12本相簿,編號也應該編到12,且請記得修改
var num_of_album=12;
這一段程式碼裡的數字為 12,
如果只有9本相簿,請修改為 9。也就是程式碼裡紫色的那個數字。

以下是程式碼部分(以12本相簿為例):

<script type="text/javascript">
var num_of_album=12;
var user_id="nhiteo";

var album_id= new Array()
album_id[1]="1363672"
album_id[2]="1363676"
album_id[3]="1363677"
album_id[4]="1363688"
album_id[5]="1363696"
album_id[6]="1363715"
album_id[7]="1368612"
album_id[8]="1364268"
album_id[9]="1364282"
album_id[10]="1364287"
album_id[11]="1379433"
album_id[12]="1379442"


var album_name= new Array()
album_name[1]="2001.06 畢業旅行-流氓土匪班之『全部抓到綠島關』(新"
album_name[2]="2001.06 畢業旅行-流氓土匪班之『全部抓到綠島關』(邦"
album_name[3]="2004.11-瘋狂電腦工程師之『報告!這絕對不是我女兒!』"
album_name[4]="2004.05-流氓土匪班小聚會之『Yuki你拿刀幹什麼?』"
album_name[5]="2004.01-流氓土匪班大搞笑之『台西郎的哥哥結婚』"
album_name[6]="2002.05-流氓土匪班之『上不了阿里山就到仁義潭發瘋吧』"
album_name[7]="2006.10.28 - 成功嶺替代役懇親會"
album_name[8]="46T水利維護替代役專訓 - 結訓考試"
album_name[9]="46T水利維護替代役專業訓練 - 戶外教學(1)"
album_name[10]="46T水利維護替代役專業訓練 - 戶外教學(2)"
album_name[11]="2006-12-31苑婷家之焢窯記趣(Part 1)"
album_name[12]="2006-12-31苑婷家之焢窯記趣(Part 2)"
</script>

<script src="http://nhiteo.googlepages.com/xuite.js" type="text/javascript"></script>

完成後就大功告成,可以使用了。
執行結果請看右手邊的 "相簿輪播(測試中)" 的項目,重新整理就可以看到不同的相簿。

3 則留言:

  1. 你好!!感謝你對Xuite photo的愛用與建議。有關"多本相簿秀圖機的播放"將會列入開發與修正時程表中,由於目前尚待開發與修正的項目還很多,因此暫時不會開發到這項,因此想先借用您的這個方法於相簿日誌中供網友使用,希望可以獲得您的首肯,謝謝!!

    回覆刪除
  2. 歡迎取用,我貼出來就是要給大家用的,方便的話註明一下出處就可以了。也希望你們多加油喔,辛苦了。

    回覆刪除
  3. 已經發佈上去了!!
    秀圖機的隨機相簿輪播方式--(會員jd貢獻的程式)http://blog.xuite.net/photo/developer/10558084
    謝謝了!!

    回覆刪除