在前面曾經談到「一個攝影人的作品怎樣在 blog 上面呈現 」時，曾經講到可以使用 Lightbox 的燈箱效果來解決文章主體欄寬度不夠表現作品的問題，我也推薦給不少朋友使用。但是有趣的事情是，整個問題演變到了最後，卻變成了朋友不知道怎麼使用 lightbox 的功能。
在這裡我用最近常用的 F2blog 跟 WordPress 來作為一個說明，至於其餘的 blog 系統，其實也差不多，因為 lightbox 只是一段 JavaScript ，只要你可以在 blog 內使用 JavaScript ，也都可以使用這個效果。
如果你的 blog 系統，沒有任何跟 lightbox 相關的套件，首先你得先分別準備這些檔案：
- WordPress 的 plugin : WordPress Lightbox 2
- F2blog: 下載 F2blog v1.2 正式版插件完整包
分別把檔案下載解壓以後，傳到指定的目錄後，分別把他啟動。
接下來 lightbox 的使用方式，常見的大概可以分成兩種：
- 點小圖後用 lightbox 的燈箱效果看大圖
- 當做文字的說明圖例
請注意：不管你是要用哪一種效果，其實都是處理連結的問題而已，何謂「都是處理連結的問題」呢？就是把「圖」或是「文字」連結到你要表現的大圖，與一般的連結不同的是語法中多了一個 " rel="lightbox" "而已。
點小圖後用 lightbox 的燈箱效果看大圖的作法
使用 WordPress 的操作方式
請先插入一個比較小的參考圖檔，接著點選圖檔，然後按下工具列的連結
在跳出來的對話框裡面，填入你要展示的大圖網址，其餘的欄位可以不用理會。
切到 HTML 碼的模式，你應該會看到類似以下的文字
<a href="大圖網址" ><img src="你的小圖" ></a>
在 href 的前面上加上 rel="lightbox" 改成
<a rel="lightbox" href="大圖網址" >< mce_src="你的小圖" ></a>
就可以達到你要的效果了，展示如下：
如果你覺得要自己改 HTML 真的太麻煩了，那你可以參考 冰漾 兄所發表的這一篇「TinyMCE 完整版 」，改用他改過的 TinyMCE 的話，在 WordPress 就不用這麼麻煩，作法更簡單，跟底下 F2blog 的操作方式相同。
使用 F2blog 的操作方式
一樣是先按下工具列的連結，在跳出來的對話框裡面，填入你要展示的大圖網址
但是這個對話框會多出好幾個 tab，再按下「進階」的「將網頁與對象產生關連」下拉中，選擇 LightBox，這樣一樣也可以達到效果。
當做文字的說明圖例的作法
上面我們說到的是點小圖後用 lightbox 的燈箱效果看大圖，但是也可以應用在「當做文字的說明圖例」。方式一模一樣，只是把上面的選圖檔點連結，改成選文字點連結而已。
進階的用法
Lightbox 有兩個比較進階的用法
- 在燈箱效果中放入說明文字
- 組圖的效果
在燈箱效果中放入說明文字
在上面的展示中，燈箱效果出來的大圖，是沒有任何說明文字的，這是我們沒有設定的關係，如果你想要跟這個展示方式一樣，有說明文字，就得自己去改 HTML 碼
方式跟跟上面改 HTML 碼的方式類似，切到 HTML 碼的模式，你應該會看到類似以下的文字
<a rel="lightbox" href="大圖網址" ><img src="你的小圖" ></a>
在 rel="lightbox" 的前面上加上 title="說明文字" 改成
<a title="說明文字" rel="lightbox" href="大圖網址" ><img src="你的小圖" ></a>
組圖的效果
組圖的效果就是我這個作品「一個虎山峰傍晚的生活記事」中，你點任何一張圖左右兩篇偏上的地方，都可以換下一張 ( NEXT ) 或是上一張 ( PREV ) 的效果。
作法也很簡單，切到 HTML 碼的模式，你應該會看到類似以下的文字
<a title="說明文字" rel="lightbox" href="大圖網址" ><img src="你的小圖" ></a>
在 rel="lightbox" 的後面加上[序號] 改成
<a title="說明文字" rel="lightbox[序號]" href="大圖網址" ><img src="你的小圖" ></a>
這裡所謂的 rel="lightbox[序號]" 中的序號，通常我會用數字來代表，也就是如果都是 rel="lightbox[001]" 的圖，會在同一組圖裡面。
那如果你要有多組「組圖」，可以不同的數字來代替，也就是不同的序號，就可以有不同的「組圖」。
大概的使用方式就是這樣囉！
.
相關文章：
Hi Jerome,
我看了你這篇文章後試著在我的 f2blog 文章的圖片上加入 lightbox 效果,
是成功了, 但我還是有兩個問題, 不知道你知不知道怎麼解決呢?
1. 我之前文章插入的圖片, 就算大小沒有超出限制, 但按了還是都會開新視窗, 不知道這個功能可不可以關掉呢? 因為文章上的圖片已經是原始大小了, 開新視窗秀的還是同一個樣子根本不需要新視窗呀。
2. 使用 lightbox 的組圖效果，我目前只要在文章中點一張圖作 lightbox 特效，他好像會自動抓同一篇文（？）的所有圖片讓我可以繼續按 Next。但是如果今天我想要撥額外的圖片，如果是你會怎麼處理呢？
非常謝謝你的幫忙，你這篇文章幫助我很多啊！ 😛
to 雁
會新開視窗，應該是你用的是內建的附件管理器的關係，因為我看你的原始碼，多了一個 onclick="open_img 就是這一段開啟新視窗的
至於撥額外的圖片呀！
我有做過呀！不過還是用連結，但是用隱藏的，您看這一篇，最底下「津津有味」四個字，其實連結了四個圖。
Jerome~
我是用f2blog內建的editor說～所以這樣我以後要插圖片就要注意一下切到 html 把這一段 open_ime 碼刪掉！
呵～那個津津有味真的太厲害了！這樣子我大概了解怎麼作囉！
哇…非常謝謝你的解答！大感謝啊！^___________^
寫錯了是 open_img
請教一下～ 😀
有辦法把設定 lightbox 開圖展示後，
讓瀏覽者無法以滑鼠右鍵另存圖片嗎？
感恩～
to: NAOKI
應該是可以吧！
這個就是主要頁面加入無法使用右鍵就好呀！
不過只能防君子啦！
你用哪一個 blog 系統？
To jerome
感謝您答覆～
我是用WORDPRESS～
至於您說的「主要頁面加入無法使用右鍵」
要如何下手？！
小弟是BLOG新手～所以疑問較多～不好意思 🙂
to: NAOKI
您應該把這一段
<body oncontextmenu="return false" ondragstart="return false" onselectstart
="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return
false"onmouseup="document.selection.empty()">
在模版的 header.php 找個適當的位置放下去，應該就可以了喔
不好意思, 我對上面那段鎖右鍵的語法有所疑問
因為想在wp裡加入小孩子的影音檔卻又不希望人家知道影片連結所以試用了這個語法
可是看來這個語法只對文字有效而對所插入的影片(wma檔)無效??
p.s. 這裡沒有留言區所以只好在這問跟主題不相干的問題了, 不好意思...
請問一下
我正在找 lightbox for f2blog的用法和插件
可是F2blog v1.2 正式版插件完整包
的連結已經失效了
請問還可以到哪裡下載
謝謝您