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

13
16,371 人次

你的網路相簿總是一成不變嗎?厭倦了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 意見

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

  2. 大大 您好

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

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

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

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

  3. 老師您好!

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

發表迴響