一個好用且完全免費的Flash相簿軟體,基本上可以不懂原理,就能輕鬆地秀圖
直覺的影像瀏覽介面還不錯喔,所有的程式碼加起來不過 10幾K,執行速度快,加上一點 html/css/xml 的知識,便可以設定文字顏色、邊框顏色與寬度,創造出具有個人特色的相簿,此外還具備檔案預先下載,依據網頁大小會自動調整尺寸,瀏覽影像鍵盤快速鍵與滑鼠滾輪支援,
SimpleViewer 也支援正體中文,只要使用Unicode (UTF8) , 中文顯示就沒有問題了,Flash Player版本則須至少為 7或以上
範例:
http://angel.tonyhsu.idv.tw/photoview/
http://www.airtightinteractive.com/photos
http://www.airtightinteractive.com/simpleviewer/lores/
http://server.everfine.com.tw/viewer/
http://fischerfotographik.com/portfolio/
http://www.nugar.com/portfolio/
http://www.sannamaria.com/gal/
http://pia.virtual.fi/gallery/
官網與下載:
http://www.airtightinteractive.com/simpleviewer/
( 由 Felix Turner 所開發的一套植基於 flash 的免費相簿軟體 )
目前版本為 1.8 下載 SimpleViewer v1.8 (zip 檔 約 43k)
SimpleViewer 的輔助程式
如果連編輯SimpleViewer 的XML都覺得麻煩,也可以藉助一些現成的工具或程式來處理
使用方法:下載檔案後上傳至空間,把大圖放至images目錄,小圖放至thumbs目錄,然後修改gallery.xml檔案即可。打開index.html檔案檢視效果。
程式碼修改:
index.html 程式碼說明
var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "7", "#181818");
"#181818"是背景顏色
gallery.xml程式碼
maxImageWidth="大圖寬度"
maxImageHeight="大圖長度"
textColor="文字顏色"
frameWidth="大圖片邊框寬度"
stagePadding="相對間距"
thumbnailColumns="列數"
thumbnailRows="行數"
navPosition="大圖和列表位置"
title="相冊標題"
enableRightClickOpen="預設值為「true」,在中間大圖上按右鍵,會有個「Open IMage In New Window」的選項,按下它,可以將目前的圖片單獨開啟在新視窗上,反之,若改成「false」,就不會出現「Open IMage In New Window」這個選項"
backgroundImagePath="背景圖片地址(支援FLASH)"
imagePath="大圖圖片地址-支援外連,留空即預設為images目錄"
thumbPath="小圖圖片地址-支援外連,留空即預設為thumbs目錄"
imageData.xml 設定說明:
http://www.airtightinteractive.com/simpleviewer/manual_instruct.html
如果要顯示中文,只要把 imageData.xml 轉為 UTF-8 就可以了。
如果有很多相片要轉檔 SimpleViewer 還貼心的提供了幾種主要的 Web Script 的轉檔程式,也可以利用 Porta 、 Picasa2 或 MacOS 的 iPhoto 直接將相片的資料夾輸出,然後再將輸出的結果放上伺服器即可
Web Script 的轉檔程式網址在:
http://www.airtightinteractive.com/simpleviewer/auto_instruct.html
如果想用後台管理相片的話,有 PHP 版本的後台管理可以用:
http://www.redsplash.de/projects/simplevieweradmin/
這裡 下載 SimpleViewerAdmin ( Christian Machmeier 開發的管理介面)
也有人寫VS .NET的版本,請見http://www.woods.com.tw/wei/mt/archives/download/SimpleViewerGenerator.exe
需安裝 Windows .NET Framework 1.1 以上的版本
作者: http://www.woods.com.tw/wei/mt/archives/2006/09/simpleviewer_18.html
PHP版管理介面 SimpleViewerAdmin
在 這裡 下載 SimpleViewerAdmin。由於這只是個管理程式,所以別忘了也
要下載 SimpleViewer
合併這兩個程式之後,資料夾應該要有下面這些檔案:
/SimpleViewer.php
/SimpleViewerAdmin.php
/SimpleViewerConfig.php
/SimpleViewerConfig.xml
/SimpleViewerCss.php
/SimpleViewerEditImage.php
/SimpleViewerFunctions.php
/SimpleViewerImageData.php
/flash_detect.js
/get_flash_player.gif
/index.php
/upgrade.html
/upgrade.php
/viewer.swf
/img/ArrowLeft.gif
/img/ArrowRight.gif
/img/Delete.gif
/img/Edit.gif
確認無誤之後,把資料夾改成想要的名字,整個上傳到伺服器上。記得將這個資料夾的權限改為
777,因為程式需要裡面的設定檔進行讀寫。整個準備步驟到此告一個段落,接下來只要將瀏覽
器指向資料夾內的 SimpleViewerAdmin.php,就可以開始使用了。
登入畫面:預設使用者名稱與密碼都是 admin,登入之後可以修改預設名稱以及密碼。
Picasa template-Simple Viewer
厲害的是,用Google的Picasa也可以做到
官方教學在這裡:http://www.airtightinteractive.com/s...ct.html#picasa
或者看這篇教學:
http://plog.hlps.tcc.edu.tw/plog/post/1/1188
How to do?
1.安裝 Google Picasa
你的電腦必須先安裝有 Google Picasa ,安裝步驟可以參考我之前寫的講義。
2.下載 SimpleViewer Picasa Template
到 SimpleViewer 下載這個 SimpleViewer Picasa Template 的zip檔案, 解壓縮後會產生一個 simpleviewer_picasa_template 的目錄,將這個目錄放到
C:\Program Files\Picasa2\web\templates 下。
3.匯出網頁
啟動Picasa→ 選取所有你要製作成網頁相簿的圖片→資料夾→匯出成網頁。
4.設定
在「匯出成網頁」的視窗上,選擇
- 你要匯出的圖片大小
- 網頁上的標題文字
- 選擇輸出網頁、圖片的資料夾
選擇完畢後按下「下一步」
5.選擇「SimpleViewer」這個範本
6.成果
上面按下「完成」後,瀏覽器會自動開啟你剛剛製作完成的網頁相簿了。
以上就是整個製作SimpleViewer相簿的過程,很輕鬆、簡單吧!假如妳還想要修改一些東西,就繼續看下去吧!
7.準備文字編輯器軟體:
因為等一下要開啟一些檔案來修改,建議使用一些支援utf-8編碼的文字編輯器來編輯這些檔案會比較簡單、方便。
你可以試試看使用 Emeditor、PSPad 或 NOTEPAD++ 這些文字編輯器。假如妳沒用過、也不想用這些文字編輯器,那更簡單的,就使用Windows內建的「記事本」來修改吧!
下面我就用記事本來操作吧!
8.修改網頁背景顏色
打開記事本→檔案、開啟舊檔 → 選擇到我們剛剛製作完成的網頁相簿目錄→ 記得要先將檔案類型改成「所有檔案」→ 選擇 index.html
在 index.html 最下面有一段
在 index.html 最下面有一段
");
fo.addVariable("preloaderColor", "0xffffff");
fo.addVariable("xmlDataPath", "gallery.xml");
fo.write("flashcontent");
上面藍色部分的顏色代碼就是網頁的背景顏色,你可以到 ColorBlender 或 Color schemes 這些網站尋找你要的背景顏色。
9.修改 gallery.xml
我們如果要修改網頁上文字顏色、縮圖區塊位置、圖片說明文字等,就是要修改 gallery.xml 這檔案,在SimpleViewer官網上有對這gallery.xml 的說明「SimpleViewer XML Options」,要修改 gallery.xml,一樣可以直接用記事本等支援UTF-8編碼的文字編輯器來修改。
下面我就簡單做個說明
- maxImageHeight="1024":圖片最大高度(像素)
- maxImageWidth="1024":圖片最大寬度(像素)
- textColor="0xFFFFFF":網頁上文字的顏色
- frameColor="0xffffff":圖片邊框的顏色
- frameWidth="20":圖片邊框的厚度
- stagePadding="40":縮圖區塊與圖片、圖片邊框間的距離
- thumbnailColumns="3":縮圖區塊的縮圖有幾個直欄,若改成"4",就會變成4直欄。
反之,若改成「false」,就不會出現「Open IMage In New Window」這個選項。
修改圖片說明:
小雨玩鋼琴
文章來源: 神魂顛倒 http://bbs.flash2u.com.tw/
留言列表