2010年10月22日

在Http File Server(HFS)上製作專屬的相本(Gallery)


HFS是一套專為個人用戶所設計的 HTTP 檔案系統 - Http File Server,如果您覺得架設 FTP Server 太麻煩,那麼這個軟體可以提供您更方便的檔案傳輸系統,下載後無須安裝,只要解壓縮後執行 hfs.exe,於「Virtual File System(虛擬檔案系統)」窗格下按滑鼠右鍵,即可新增/移除虛擬檔案資料夾,或者,直接將欲加入的檔案拖曳至此視窗,便可架設完成個人 HTTP 虛擬檔案伺服器。



用這套檔案伺服器軟體也好幾年了
最近才突然發現原來可以自己做有點類似相簿的功能XDDD
HFS好棒阿!!!!!

首先要去下載Galleroo這套軟體~點進去以後按"Download"就可以下載了~
目前使用的版本是3.5~

安裝完以後打開軟體
介面大概是長這樣

他有四種樣式(style)可以選~
我是用Tavla這個樣式~因為好像只有這個可以分頁面~
其他樣式都是啪啦一口氣就全部的小縮圖(thumb)列出來~
你就會看到你的HFS狂閃綠光XDDDDDDDDDD

還是其他樣式也有分頁功能~只是我沒發現!!!XDD
畢竟網站都是英文的= ="
我也不知道 哈哈哈哈!

這邊是四種樣式的範例網站~可以參考看看!

Examples

然後我大概介紹一下功能

Go! : 按下去就可以開始產生相片播放的html檔案了
Mode:這邊分三種「Smart Tweak」 「Tweak Full」 「HTML Only」
   Smart Tweak: 應該是跟表面上的意思一樣~相信他的智慧~交給他判斷吧XDDD
   Tweak Full: 應該是縮圖跟HTML都會重新產生一次
   HTML Only: 應該是只產生HTML檔就好
Source Folder: 選擇你的圖片來源資料夾
Gallery Folder: 選擇你要產生的相片撥放的html檔案要放哪個資料夾
Thumb Size: 程式會產生你指定大小的縮圖(預設75)
Image Size: 程式會產生你指定大小的放大圖(預設600)
Thumb Quality: 程式會產生你指定的相片品質的縮圖(預設75)
Image Quality: 程式會產生你指定的相片品質的放大圖(預設75)
Title: 主標題
Sub Title: 子標題
Sort By: 這邊可以選擇依照日期(date)或是名字(name)來排序
Sort Order: 這邊可以選擇順排還是逆排
Do Thumb Slider: 設定yes
Columns Per Index: 主頁面每一列要放幾張圖
Rows Per Index: 主頁面要有幾列
Do Three Stage: 選no (產生縮圖~放大圖) 選yes(產生縮圖 放大圖 原始圖)
Do Auto Play Movies: 自動開始
Custom CSS File: 看要不要自訂CSS~我這邊是留空白~可是有重寫一個覆蓋它原始的
Gallery Root: 他上一層的網址(預設是../index.html) 因為我是用HFS所以改成「../」就可以了

然後功能介紹完了~
就設定一下就按 Go! 吧!!!!!

ps.
我再Go!的時候 有時候發現會卡住~
好像是圖片的問題~可是也不知道圖片是哪裡有問題~
可是把卡住圖片拿走~他就又可以跑得很順了~真怪=口=

Go!完以後就是要把相本加入HFS了~
假設你Gallery Folder(就是你產生相片的html檔案的資料夾)的名稱是Image Gallery好了
你就把Image Gallery這個資料夾拖拖拖拖到HFS裡面~
看你要放甚麼位置~
然後我是選real-folder 不然virtual-folder每次重改檔案都要重拉一次很麻煩~
然後在HFS的Gallery Folder的資料夾上面按右鍵選Properties~找Default file mask
填入index.html~OK!!

然後就可以收工吃飯了=口=
順便分享一下我的CSS XDDD 雖然很醜~不過比預設的好看5千倍有吧XDD(我真不要臉
下載
等 Go! 完以後把檔案蓋進去就好~~~~
要套用我的CSS的話~~~
Galleroo所有的顏色~字體~背景~按鈕圖片都不要改唷~
恩~就是細麵這些都用原本的設定就好~

啾咪~

這個就是我的版面XDD 雖然還是很醜不過比預設的每了啦XDDD
然後因為圖片都太害羞了~所以用小畫家把它蓋掉了XDDD
這是點進去的內頁畫面~~~XDDDD

2 則留言:

  1. 好有用的教學~!!找了很久了~~

    不過你的css 我下載不了..請問可不可以上載到其他空間? 謝謝~!!

    回覆刪除
  2. 哈哈~Sorry!
    我連結打錯了=口=
    你拉到最上面有個My Box的分頁~
    裡面可以抓=口=

    回覆刪除

您可以使用一些 HTML 標記,例如 <b>, <i>, <a>