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

發表: 2008-07-21 09:44 分類: Flash, Javascript, 程式語言 | 13 則迴響 » | 瀏覽:15,508 人次

標籤 :

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

請繼續閱讀下一頁:沒有自己的網頁空間怎麼辦?


相似文章




→→頁次: 1 2

喜歡㊣軟體玩家的文章嗎?歡迎加入《軟體玩家FB粉絲團》吧!
或是按下<這邊>來訂閱RSS!


隨機文章

迴響:

歡迎留下您的意見!


※PS: 因為阿正老師時間有限,且本站所介紹的軟體種類太多(所產生的狀況也很多),可能無法回答一一回答讀者們的問題(尤其像是出現某某錯誤訊息,或者操作過程中哪邊卡住),您可以先上Google搜尋相關的關鍵字,或是到軟體的官方網站/論壇來爬文,不便之處還請見諒。
※PS:本站不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取該類檔案。
※PS:本站因採用反向代理(Reverse Proxy)技術,留言後必須等到20分鐘後快取網頁過期才會顯示。