你的網路相簿總是一成不變嗎？厭倦了Flickr裡面單調的展示畫面嗎？現在，只要用TiltViewer這套簡單的網頁小程式，只用了簡單的HTML+Javascript+Flash技術，就可秀出令人驚嘆的3D動態相簿喔！只要用移動滑鼠就可自由的移動、旋轉及放大相簿，讓你舒服的欣賞照片，沒有廣告和文字的束縛，是個相當值得推薦的小程式喔！
希望自己建立漂亮的相簿，或是喜歡用Flickr網路相簿、卻不滿意其展示效果的玩家有福了！TiltViewer這套網頁小程式，能讓你輕鬆建立自己的動態網頁相簿，它以生動的Flash技術，讓整個相簿「動」起來，效果相當令人驚豔喔！只要你有個人的網頁空間，就可以輕鬆製作。
TiltViewer有兩種應用方式，一種是用自己的網頁空間放置相片，一種是直接秀出Flickr裡面的相簿。兩者都只要簡單修改HTML檔（或xml檔）即可完成，並不需要任何程式設計的基礎。
使用方式
- 先下載TiltViewer程式，解壓縮之後會得到一個TiltViewer資料夾。
- 用文書編輯軟體修改裡面的index.html及gallery.xml檔案。
- 將修改好的檔案上傳至你的網頁伺服器中。
- 以瀏覽器開啟該網址即可。
方法一：製作自己的動態相簿
如果你自己有一堆照片，不想放到網路相簿中，你可以用以下的方式來建立自己的TiltViewer動態相簿。
1.將你的相片放在imgs資料夾中。
2.修改index.html，找到下面幾行：
|
// XML GALLERY OPTIONS //GENERAL OPTIONS |
可以修改的部份有：
- maxJPGSize：可設定圖片檔放大的寬度(預設為640)
- columns/rows：圖片有幾欄/幾列
3.修改gallery.xml，每張相片都由一組<photo>及</photo>組成，如下圖：
可以修改裡面：
- imageurl ：圖片的位置，預設是放在imgs資料夾內
- linkrul：圖片的超連結，按下圖片後可連到的網址
- title：圖片的標題
- description：圖片的說明
4.上傳至網頁伺服器中，並以瀏覽器開啟網址即可。
※此方法的缺點是圖檔的名稱、說明必須自己一筆一筆去修改，較不適合初學者。
方法二：直接秀出Flickr的相簿
如果你沒有夠大的網頁空間存放你的相片，可以試試看知名的Flickr.com這個相片分享網站，只要先將相片上傳至Flickr中，再簡單修改index.html檔即可。
使用步驟如下：
- 找出你的Flickr的userid。只要連到Flickr首頁，登入後點選「你的所有內容」，會出現網址：
http://flickr.com/photos/xxxxxxxx@xxx/ ，裡面那串由數字、＠及英文構成的文字，就是你的userid - 以文字編輯軟體（如記事本）開啟index.html，找到以下的內容：
fo.addVariable("useFlickr", "false");
fo.addVariable("xmlURL", "gallery.xml");
fo.addVariable("maxJPGSize","640");//GENERAL OPTIONS
fo.addVariable("useReloadButton", "false");
fo.addVariable("columns", "3");
fo.addVariable("rows", "3");修改的地方有：
(1) fo.addVariable("useFlickr", "false"); 裡面的false改成 true。
(2) 在空白處加上
fo.addVariable("user_id", "48508968@N00");
雙引號裡面的要改成你自己的flickr userid
(3)如果你要顯示部份的照片，可以標籤方式來篩選，加上：
fo.addVariable("tags", "jump,smile");
雙引號內的標籤請以半形的逗號隔開。如果你沒加上標籤，請到Flickr的管理介面來處理。 - 儲存並上傳（只要上傳index.html、swfobject.js及TiltViewer.swf三個檔案即可）。
※如果你想了解更詳細的設定，請參考設定選項教學頁面。
如何操作TiltViewer?
上傳至網頁伺服器後，開啟該網頁，你的照片就會開始一張張"飛"進來了，移動滑鼠即可旋轉畫面，在照片上點一下可以放大照片（放大尺寸由之前介紹的maxJPGSize屬性所設定），再按一下即可還原。如果照片超過一頁，會在螢幕兩邊出現左右箭頭，可以直接翻頁。
你也可以使用鍵盤的方向鍵來選擇照片，按下空白鍵可放大/還原照片。
放大後的照片右下角的按鈕按下後，會出現照片的標題、作者、說明及日期等資訊。
感謝分享，先收藏起來 🙂
這篇教學文章好讚喔~
小明先珍藏起來，
相信架學校英文網站一定很好用~
謝謝分享
(那麼好的優格 小明就偷加入到我的好友聯播啦^^)
http://www.ebbu.org/ 有用到 TiltViewer 喔
請問 圖片的說明 用中文好像會出現亂碼？這可以解決嗎？謝謝。
感謝分享，很有趣 ^^
四楼的兄弟，我是把所有编码转成utf-8，然后还要把xml中的中文写成类似“规格：”这样的utf-8字符
第6樓 Kim
可否說詳細一點如何加入utf-8於xml中?
你的教學真的太棒啦！！
但現在google page已經不能用了
只能用google site
請問在google site要如何upload”TiltViewer”資料夾呢
我在google site裡找了半天找不到site manager>”<
大感謝*心*
大大 您好
這陣子在找嵌入式系統設計相關的部落格，意外發現你的內容滿豐富也滿有深度
最近我也成立【嵌入式設計學院】部落格，http://www.wretch.cc/blog/cdpda
內容包含嵌入式系統設計‧QT圖形開發‧Linux Device Driver‧科技人甘苦談‧ETC幫幫忙
有空可以來留言! 網址：http://www.wretch.cc/blog/cdpda
很有趣，可是程序好像下不了了
網頁編碼改成中文就行
你好想要請教一下 如果我想要直接修出FLICKR相簿
那是否要修改XML呢?
老師您好!
拜見您的用TiltViewer這套簡單的網頁小程式，我也照您所說的做，不過圖片飛不進來。
請問出了什麼問題? http://www.fulin.hostwq.net/tiltviewer/index.html
下列是程式碼，請幫我看一下，好嗎? 我的flickr是50354130@N03
TiltViewer
/* hide from ie on mac \*/
html {
height: 100%;
overflow: hidden;
}
#flashcontent {
height: 100%;
}
/* end hide */
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #000000;
color:#ffffff;
font-family:sans-serif;
font-size:40;
}
a {
color:#cccccc;
}
TiltViewer requires JavaScript and the latest Flash player. Get Flash here.
var fo = new SWFObject(“TiltViewer.swf”, “viewer”, “100%”, “100%”, “9.0.28”, “#000000”);
// TILTVIEWER CONFIGURATION OPTIONS
// To use an option, uncomment it by removing the “//” at the start of the line
// For a description of config options, go to:
// http://www.airtightinteractive.com/projects/tiltviewer/config_options.html
//FLICKR GALLERY OPTIONS
// To use images from Flickr, uncomment this block
//fo.addVariable(“useFlickr”, “true”);
//fo.addVariable(“user_id”, “50354130@N03”);
//fo.addVariable(“tags”, “jump,smile”);
//fo.addVariable(“tag_mode”, “all”);
//fo.addVariable(“showTakenByText”, “true”);
// XML GALLERY OPTIONS
// To use local images defined in an XML document, use this block
fo.addVariable(“useFlickr”, “true”);
fo.addVariable(“xmlURL”, “gallery.xml”);
fo.addVariable(“maxJPGSize”,”640″);
//GENERAL OPTIONS
fo.addVariable(“useReloadButton”, “false”);
fo.addVariable(“columns”, “3”);
fo.addVariable(“rows”, “3”);
//fo.addVariable(“showFlipButton”, “true”);
//fo.addVariable(“showLinkButton”, “true”);
//fo.addVariable(“linkLabel”, “View image info”);
//fo.addVariable(“frameColor”, “0xFF0000”);
//fo.addVariable(“backColor”, “0xDDDDDD”);
//fo.addVariable(“bkgndInnerColor”, “0xFF00FF”);
//fo.addVariable(“bkgndOuterColor”, “0x0000FF”);
//fo.addVariable(“langGoFull”, “Go Fullscreen”);
//fo.addVariable(“langExitFull”, “Exit Fullscreen”);
//fo.addVariable(“langAbout”, “About”);
// END TILTVIEWER CONFIGURATION OPTIONS
fo.addParam(“allowFullScreen”,”true”);
fo.write(“flashcontent”);