網路相簿太單調嗎？TiltViewer讓你的相簿「動」起來！

13
17,568 人次

你的網路相簿總是一成不變嗎？厭倦了Flickr裡面單調的展示畫面嗎？現在，只要用TiltViewer這套簡單的網頁小程式，只用了簡單的HTML+Javascript+Flash技術，就可秀出令人驚嘆的3D動態相簿喔！只要用移動滑鼠就可自由的移動、旋轉及放大相簿，讓你舒服的欣賞照片，沒有廣告和文字的束縛，是個相當值得推薦的小程式喔！

image

希望自己建立漂亮的相簿，或是喜歡用Flickr網路相簿、卻不滿意其展示效果的玩家有福了！TiltViewer這套網頁小程式，能讓你輕鬆建立自己的動態網頁相簿，它以生動的Flash技術，讓整個相簿「動」起來，效果相當令人驚豔喔！只要你有個人的網頁空間，就可以輕鬆製作。

TiltViewer有兩種應用方式，一種是用自己的網頁空間放置相片，一種是直接秀出Flickr裡面的相簿。兩者都只要簡單修改HTML檔（或xml檔）即可完成，並不需要任何程式設計的基礎。

image 

TiltViewer v1.3
下載點：http://airtightinteractive.com/projects/tiltviewer/tiltviewer.zip
檔案大小：194KB
展示畫面：http://www.airtightinteractive.com/projects/tiltviewer/app/
使用教學：http://airtightinteractive.com/projects/tiltviewer/flickr_manual_instruct.html

使用方式

  1. 先下載TiltViewer程式，解壓縮之後會得到一個TiltViewer資料夾。
    image
  2. 用文書編輯軟體修改裡面的index.html及gallery.xml檔案。
  3. 將修改好的檔案上傳至你的網頁伺服器中。
  4. 以瀏覽器開啟該網址即可。

方法一：製作自己的動態相簿

如果你自己有一堆照片，不想放到網路相簿中，你可以用以下的方式來建立自己的TiltViewer動態相簿。

1.將你的相片放在imgs資料夾中。

2.修改index.html，找到下面幾行：

// XML GALLERY OPTIONS
// To use local images defined in an XML document, use this block       
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");

可以修改的部份有：

  • maxJPGSize：可設定圖片檔放大的寬度(預設為640)
  • columns/rows：圖片有幾欄/幾列

3.修改gallery.xml，每張相片都由一組<photo>及</photo>組成，如下圖：

image

可以修改裡面：

  • imageurl ：圖片的位置，預設是放在imgs資料夾內
  • linkrul：圖片的超連結，按下圖片後可連到的網址
  • title：圖片的標題
  • description：圖片的說明

4.上傳至網頁伺服器中，並以瀏覽器開啟網址即可。

※此方法的缺點是圖檔的名稱、說明必須自己一筆一筆去修改，較不適合初學者。

方法二：直接秀出Flickr的相簿

如果你沒有夠大的網頁空間存放你的相片，可以試試看知名的Flickr.com這個相片分享網站，只要先將相片上傳至Flickr中，再簡單修改index.html檔即可。

使用步驟如下：

  1. 找出你的Flickr的userid。只要連到Flickr首頁，登入後點選「你的所有內容」，會出現網址：
    http://flickr.com/photos/xxxxxxxx@xxx/ ，裡面那串由數字、＠及英文構成的文字，就是你的userid
    image
  2. 以文字編輯軟體（如記事本）開啟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的管理介面來處理。

  3. 儲存並上傳（只要上傳index.html、swfobject.js及TiltViewer.swf三個檔案即可）。

※如果你想了解更詳細的設定，請參考設定選項教學頁面。

如何操作TiltViewer?

上傳至網頁伺服器後，開啟該網頁，你的照片就會開始一張張"飛"進來了，移動滑鼠即可旋轉畫面，在照片上點一下可以放大照片（放大尺寸由之前介紹的maxJPGSize屬性所設定），再按一下即可還原。如果照片超過一頁，會在螢幕兩邊出現左右箭頭，可以直接翻頁。

你也可以使用鍵盤的方向鍵來選擇照片，按下空白鍵可放大/還原照片。

image

放大後的照片右下角的按鈕按下後，會出現照片的標題、作者、說明及日期等資訊。

image image

（請繼續閱讀下一頁：沒有自己的網頁空間怎麼辦？）

相關文章作者的更多文章

13 意見

  8. 你的教學真的太棒啦！！
    但現在google page已經不能用了
    只能用google site
    請問在google site要如何upload”TiltViewer”資料夾呢
    我在google site裡找了半天找不到site manager>”<
    大感謝*心*

  9. 大大 您好

    這陣子在找嵌入式系統設計相關的部落格，意外發現你的內容滿豐富也滿有深度

    最近我也成立【嵌入式設計學院】部落格，http://www.wretch.cc/blog/cdpda

    內容包含嵌入式系統設計‧QT圖形開發‧Linux Device Driver‧科技人甘苦談‧ETC幫幫忙

    有空可以來留言! 網址：http://www.wretch.cc/blog/cdpda

  13. 老師您好!

    拜見您的用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”);

發表迴響