「光箱」（Lightbox）是時下許多網站或部落格普遍使用的一種圖片流覽技術。
什麼是光箱？自己到Lightbox2網站看一下範例就知（記得點Lightbox網站裡的小圖）：
＞＞ Lightbox 2
這種以Javascript所撰寫的圖片特效技術，不但可以讓網頁的排版更加靈活，也讓使用者不用離開文章就可觀看大張的圖片。
目前Drupal 上與光箱相關的模組選擇相當多，以下模組在Drupal 6上都能使用，但目前只有"彩箱"(Colorbox)已經移植到Drupal 7。
2. 開啟wysiwyg的進階圖像設定：到/admin/settings/wysiwyg頁面之後，在所要設定的編輯器後面點下「編輯」，在編輯器的設定裡，選擇Button and plugins選項，確定將Advanced image（進階圖像設定）功能打開
3. 在wysiwya裡加入樣式：同樣在Wysiwyg編輯器裡，增加上面所設定的 class名稱
選擇「CSS」一項，把剛才設定好的class名稱輸入到「CSS classes:」欄位裡。
做好以上設定之後就可以開始使用了。
基本使用步驟為：
1. 先在文章中插入小圖，插入小圖時記得在Appearance標籤下，選擇先前所設定的Class（樣式選擇Lightbox）。
2. 以游標選擇小圖，在小圖上按下「插入超連結」的圖標，然後將要連向的超連結指向到所要顯示的大圖。
3. 如果想要為圖加上文字說明，則在插入超連結時，把圖說文字輸入到title一欄裡。
方法三：與Insert+CCK+ImageField+ImageCache結合
這樣的整合，可以讓使用者跳脫麻煩的Wysiwyg文字編輯器的安裝與設定，直接在文章中加入上傳圖片的欄位，然後在上傳好圖片之後直接按下「Insert」（插入），就做好了光箱特效圖片的插入。
這個應該是Lightbox2在Drupal上最經典與最美妙的一種應用方式。只不過Lightbox2模組有些bug，所以研究了很久才終於把這個模式建立好。
我們假設您已經安裝好CCK、Insert、ImageField，以及ImageCache等模組並已經啟用。接著依以下操作。
做好各種設定後，按下「儲存欄位設定」即可。
↓ 為內容類型新增插入圖片的欄位時, 記得做好Insert的設定
4. 設定欄位顯示
同樣到該內容類型裡，按下「顯示欄位」標簽，做好各種相關的顯示設定。
5. 設定使用者權限
6. 修改程式碼
照理說，做好以上設定之後應該可以開始讓使用者在文章中直接上傳與插入具有Lightbox2特效的圖片了〔到此你也可以直接試用看看，若沒問題那麼此步驟可以省略〕。
↓ 完成所有的設定之後現在可以在貼文時直接上傳圖片
↓ 上傳之後直接按下"insert"（插入）就把具光箱特效的圖片插入到文章中了, 而如果你在內容類型的欄位設定裡還增加了Origin（原圖）或是teaser（縮圖）等選項, 使用者也可選擇以這些不同樣式將圖片插入文章裡
不過，好像Lightbox2程式有個小小錯誤，我試了很久，在插入圖片之後一直有誤，會出現一段多餘的html碼之外，光箱特效也不正常。
我找了論壇很多技術討論，的確有很多人遇到和我一樣的問題，有人說是輸入法設定問題，只要去設定輸入法的過濾器（filter）即可解決。此方法建議使用者把所有過濾器停用，只開啟Lightbox2的過濾器。
但我試了這個方法，也不管用。使用者可以試試，或許有些人此法管用。
最後我找到的終極解決方法則是修改模組的一段程式碼。
在解壓縮的Lightbox2檔案夾裡找到lightbox2-insert-image.tpl.php檔案，然後以文字編輯器開啟（建議使用Notepad++，不要使用Windows附的記事本，不然可能會有PHP程式的執行問題）
找到最後一行的這段程式碼
直接把＜?php print $download_link ?＞一段刪除即可。而如果你要讓光箱特效直接加入上傳檔案時所輸入的圖說，也可把這段程式碼改為＜?php print $title ?＞，就是讓PHP改為輸入上傳圖片時使用者所輸入的文字說明。
儲存修改好的檔案後，再把檔案上傳到網站上對應的位置即可。
結語：
Lightbox的應用其實還想當的廣，除了可以為lighbox加入更多各式不同的屬性，也可將它運用在更多的介面上：例如使用者註冊或登入的區塊，或是站內的Gmap瀏覽。
甚至在進階的使用上還可以與Flickr等外部相簿結合。
………這些應用看官若有空可以自行去研究。
至於其他更多的屬性指令與應用方式，可以在下載模組後，檔案夾內的README.txt裡找到。
什麼是光箱？自己到Lightbox2網站看一下範例就知（記得點Lightbox網站裡的小圖）：
＞＞ Lightbox 2
這種以Javascript所撰寫的圖片特效技術，不但可以讓網頁的排版更加靈活，也讓使用者不用離開文章就可觀看大張的圖片。
目前Drupal 上與光箱相關的模組選擇相當多，以下模組在Drupal 6上都能使用，但目前只有"彩箱"(Colorbox)已經移植到Drupal 7。
以下是與Lingtbox相關或相似的模組：
Lightbox2 模組
安裝數：83881 （2011年3月29日為止，安裝數有在略微增加）
http://drupal.org/project/lightbox2
目前Drupal 6上安裝最多的網站。
jQuery Lightbox模組
安裝數：909（2011年3月29日，安裝數在減少）
http://drupal.org/project/jlightbox
jQuery版的Lightbox，安裝人數相當少
thickbox模組
安裝數：22519 （2011年3月29日，安裝數在減少，可能是移轉到Colobox的緣故）
http://drupal.org/project/thickbox
這是精簡版的Lightbox模組，使用人數謹次於Lightbox2。但作者已經把開發計畫轉移到colorbox，並建議Drupal 6的使用者升級到Drupal 7時可以Colorbox為替代模組。
colorbox
安裝數：6860 （2011年3月29日，安裝數在增加）
http://drupal.org/project/colorbox
Colorbox和Thickbox一樣都是精簡版的Lightbox技術，目前使用量雖然很少，但卻是光箱技術中移植到Drupal 7最快的模組。目前甚至Lightbox2都還未移植過去，也因此以Drupal 7架站者當下唯一選擇為colorbox。
Drupal 7+Colorbox的應用我會再以另一篇文章介紹，這裡先介紹Drupal 6 + Lightbox2 如何使用。
Drupal 6+ Lightbox2
在Drupal 6上使用Lightbox 2應該是不錯的選擇，當然，若考慮到短期內要升級Drupal 7，可能Colorbox會是更好的選擇，但我在Drupal 6上使用Colorbor遇到很多問題：像是與Javascript衝突而讓Gmap失效，還有該模組裝了之後也沒能正常運作，所以放棄。
安裝方法（官方說明）：
如何使用？
安裝及設定好Lightbox2之後，有三種基本的使用方式：
〔注意：以下說明的HTML標籤全以全形的「＜」和「＞」取代半形的「<」和「>」，若要拿去套用請記得修改〕
方法一. 在圖檔連結上手動輸入程式碼
如果你有大量的圖要處理，那麼用這個方法是最好的：把圖檔分別做好大圖和小圖的處理之後（建議用相同檔名，並分別放在不同資料夾），一起用FTP上傳到網站上。然後直接拿出範例程式碼，一一修改圖檔的編號之後，貼到文章裡就可以了。 這個方法的另一好處是：若你有考慮到未來的Drupal升級，那麼這個方法是最好的。因為完全沒去動到內容類型的欄位架構，可以大大降低升級Drupal的難度。〔先前我原本想將Drupal 6升級到7，但研究一下後來失敗的原因，很可能是view及CCK使用很多的關係，也就是有太多客製化的欄位等諸多問題。〕 以下詳細說明； 如果你只有單張圖，那麼使用最基本的指令即可，其架構為：
〔重點在超連結的tag裡要有rel="lightbox"這個指令〕
所以完整的程式碼看起來應該類似這樣：
不過這只是在單張圖裡加入光箱的特效。如果你要讓整篇文章有相本一張張翻閱或其他的效果，lightbox還可以加入很多的屬性。
例如最常用的是加入roadtrip：
或者，你喜歡幻燈片播放效果，則可將rel="lightbox"改為slideshow：
如果單單放圖你還不滿意，希望為圖加上圖說（或字幕說明），那麼只要繼續在rel="lightbox"或rel="slideshow"裡加入「[文字說明]」的屬性即可：
＜a href="image/image-big1.jpg" mce_href="image/image-big1.jpg" border="0" rel="lightbox[roadtrip] [文字說明]"＞＜img src="/image/image-small1.jpg＜/a＞
二、與Wysiwyg結合
你的Drupal使用者可能不懂html，一想到「程式碼」就連碰都不敢碰。那麼與Wysiwyg結合是可以考慮的選擇。但與第三種方法比起來，這個方式其實挺麻煩的。但與第三種方法相較的好處是，它不需在內容類型上增加欄位，所以考慮要降低未來Drupal升級難度的話，這個選項還是可以考慮的。
由於在Drupal安裝TinyMCE等Wysiwyg編輯器很複雜，特別又要在編輯器上整合「上傳/插入圖片」功能，那又更困難了。我們假設你的Drupal的編輯器已經整合好直接上傳及插入圖片的功能，這一段就略過不做說明。
那麼接下來要先做好三項設定。
1. 指定樣式（class）：是在Ligntbox2設定頁面找到「Automatic image handling」（自動影像處理）標籤，然後找到最下方的「Custom class images」選項，選擇好Automatic handler for custom class images（客製化class的影像處理方式），然後在Custom image trigger classes裡指定一個class名，例如「Lightbox」，或是TriggerLightbox……等諸如此類讓自己可以容易記住的。這裡我們以設為「Lightbox」為例
Lightbox2 模組
安裝數：83881 （2011年3月29日為止，安裝數有在略微增加）
http://drupal.org/project/lightbox2
目前Drupal 6上安裝最多的網站。
jQuery Lightbox模組
安裝數：909（2011年3月29日，安裝數在減少）
http://drupal.org/project/jlightbox
jQuery版的Lightbox，安裝人數相當少
thickbox模組
安裝數：22519 （2011年3月29日，安裝數在減少，可能是移轉到Colobox的緣故）
http://drupal.org/project/thickbox
這是精簡版的Lightbox模組，使用人數謹次於Lightbox2。但作者已經把開發計畫轉移到colorbox，並建議Drupal 6的使用者升級到Drupal 7時可以Colorbox為替代模組。
colorbox
安裝數：6860 （2011年3月29日，安裝數在增加）
http://drupal.org/project/colorbox
Colorbox和Thickbox一樣都是精簡版的Lightbox技術，目前使用量雖然很少，但卻是光箱技術中移植到Drupal 7最快的模組。目前甚至Lightbox2都還未移植過去，也因此以Drupal 7架站者當下唯一選擇為colorbox。
Drupal 7+Colorbox的應用我會再以另一篇文章介紹，這裡先介紹Drupal 6 + Lightbox2 如何使用。
Drupal 6+ Lightbox2
在Drupal 6上使用Lightbox 2應該是不錯的選擇，當然，若考慮到短期內要升級Drupal 7，可能Colorbox會是更好的選擇，但我在Drupal 6上使用Colorbor遇到很多問題：像是與Javascript衝突而讓Gmap失效，還有該模組裝了之後也沒能正常運作，所以放棄。
安裝方法（官方說明）：
- 將下載完及解壓縮的lightbox2資料匣複製到Drupal網站的models目錄
- 到管理/網站建構/模組（admin/build/modules）啟用Lightbox 2模組
- 到使用者管理區設定好使用者使用權限
- 到admin/settings/lightbox2做好相關設定
- 將打開圖片連結的方式修改為lightbox。〔請參考以下說明〕
- 如果需要播放flv檔，還要另外裝FLV播放器，網氇上有很多相關的資源，請參考http://www.jeroenwijering.com/
如何使用？
安裝及設定好Lightbox2之後，有三種基本的使用方式：
- 手動在在html碼裡加上諸如 rel="lightbox[特效屬性][文字說明]"的程式碼
- 與Wysiwyg的插入圖片結合。
- 與Insert及ImageField模組結合之後，在文章上直接上傳及插入文章 三種方法各有優裂，所以三種我們都介紹。讀者可以自行評估好壞之後彈性使用。
〔注意：以下說明的HTML標籤全以全形的「＜」和「＞」取代半形的「<」和「>」，若要拿去套用請記得修改〕
方法一. 在圖檔連結上手動輸入程式碼
如果你有大量的圖要處理，那麼用這個方法是最好的：把圖檔分別做好大圖和小圖的處理之後（建議用相同檔名，並分別放在不同資料夾），一起用FTP上傳到網站上。然後直接拿出範例程式碼，一一修改圖檔的編號之後，貼到文章裡就可以了。 這個方法的另一好處是：若你有考慮到未來的Drupal升級，那麼這個方法是最好的。因為完全沒去動到內容類型的欄位架構，可以大大降低升級Drupal的難度。〔先前我原本想將Drupal 6升級到7，但研究一下後來失敗的原因，很可能是view及CCK使用很多的關係，也就是有太多客製化的欄位等諸多問題。〕 以下詳細說明； 如果你只有單張圖，那麼使用最基本的指令即可，其架構為：
＜a href="大圖" mce_href="大圖" rel="lightbox"＞小圖＜/a＞
〔重點在超連結的tag裡要有rel="lightbox"這個指令〕
所以完整的程式碼看起來應該類似這樣：
＜a href="image/image-big1.jpg" mce_href="image/image-big1.jpg" border="0" rel="lightbox"＞＜img src="/image/image-small1.jpg＜/a＞
不過這只是在單張圖裡加入光箱的特效。如果你要讓整篇文章有相本一張張翻閱或其他的效果，lightbox還可以加入很多的屬性。
例如最常用的是加入roadtrip：
＜a href="image/image-big1.jpg" mce_href="image/image-big1.jpg" border="0" rel="lightbox[roadtrip]"＞＜img src="/image/image-small1.jpg＜/a＞
或者，你喜歡幻燈片播放效果，則可將rel="lightbox"改為slideshow：
＜a href="image/image-big1.jpg" mce_href="image/image-big1.jpg" border="0" rel="slideshow[roadtrip]"＞＜img src="/image/image-small1.jpg＜/a＞
如果單單放圖你還不滿意，希望為圖加上圖說（或字幕說明），那麼只要繼續在rel="lightbox"或rel="slideshow"裡加入「[文字說明]」的屬性即可：
＜a href="image/image-big1.jpg" mce_href="image/image-big1.jpg" border="0" rel="lightbox[roadtrip] [文字說明]"＞＜img src="/image/image-small1.jpg＜/a＞
二、與Wysiwyg結合
你的Drupal使用者可能不懂html，一想到「程式碼」就連碰都不敢碰。那麼與Wysiwyg結合是可以考慮的選擇。但與第三種方法比起來，這個方式其實挺麻煩的。但與第三種方法相較的好處是，它不需在內容類型上增加欄位，所以考慮要降低未來Drupal升級難度的話，這個選項還是可以考慮的。
由於在Drupal安裝TinyMCE等Wysiwyg編輯器很複雜，特別又要在編輯器上整合「上傳/插入圖片」功能，那又更困難了。我們假設你的Drupal的編輯器已經整合好直接上傳及插入圖片的功能，這一段就略過不做說明。
那麼接下來要先做好三項設定。
1. 指定樣式（class）：是在Ligntbox2設定頁面找到「Automatic image handling」（自動影像處理）標籤，然後找到最下方的「Custom class images」選項，選擇好Automatic handler for custom class images（客製化class的影像處理方式），然後在Custom image trigger classes裡指定一個class名，例如「Lightbox」，或是TriggerLightbox……等諸如此類讓自己可以容易記住的。這裡我們以設為「Lightbox」為例
2. 開啟wysiwyg的進階圖像設定：到/admin/settings/wysiwyg頁面之後，在所要設定的編輯器後面點下「編輯」，在編輯器的設定裡，選擇Button and plugins選項，確定將Advanced image（進階圖像設定）功能打開
3. 在wysiwya裡加入樣式：同樣在Wysiwyg編輯器裡，增加上面所設定的 class名稱
選擇「CSS」一項，把剛才設定好的class名稱輸入到「CSS classes:」欄位裡。
做好以上設定之後就可以開始使用了。
基本使用步驟為：
1. 先在文章中插入小圖，插入小圖時記得在Appearance標籤下，選擇先前所設定的Class（樣式選擇Lightbox）。
2. 以游標選擇小圖，在小圖上按下「插入超連結」的圖標，然後將要連向的超連結指向到所要顯示的大圖。
3. 如果想要為圖加上文字說明，則在插入超連結時，把圖說文字輸入到title一欄裡。
方法三：與Insert+CCK+ImageField+ImageCache結合
這樣的整合，可以讓使用者跳脫麻煩的Wysiwyg文字編輯器的安裝與設定，直接在文章中加入上傳圖片的欄位，然後在上傳好圖片之後直接按下「Insert」（插入），就做好了光箱特效圖片的插入。
這個應該是Lightbox2在Drupal上最經典與最美妙的一種應用方式。只不過Lightbox2模組有些bug，所以研究了很久才終於把這個模式建立好。
我們假設您已經安裝好CCK、Insert、ImageField，以及ImageCache等模組並已經啟用。接著依以下操作。
- 到ImageCache去設定預設的縮圖。例如，我們設定一個自動將圖裁剪為160x160的小圖；或是依比例把寬度縮小到120px。〔大小及圖形處理方式可自行做各種設定〕
- 做好Lightbox2的相關設定，特別是CCK display settings一項
- 到內容類型裡找到所要增加插入圖片的文章類型，點選「編輯欄位」，或按「管理欄位」標籤，增加一個新欄位。〔「要儲存的資料類型」選「檔案」；然後「編輯資料的表單元素」選「Image」
- File size restrictions（檔案大小限制）：自行依網站使用狀況輸入適當的大小。
- Insert下記得勾選Enable insert button（啟用插入按鍵）
- Insert下勾選所要插入的圖片樣式（Enable insertstyles）：Orginal image指的是原圖。然後記得要勾選類似這樣的樣式：「Lightbox2: 預設圖檔大小 ->original」。「預設圖檔大小」就是先前你在Imagecache所預設的縮圖處理模式。
- Insert裡Default insert style（預設插入樣式）：當使用者要插入圖檔時，預設的樣式。通常是大家可能最常用，或是在你的網站設計裡最建議使用者插入的樣式。
- 整體設定：「多值」一項可以選擇自己想要的上傳圖檔數。如果是一章，就選「1」。如果很多張，建議選擇「無限」。與其限定使用者上傳的圖片張數，不如在先前的圖檔大小做好設定即可。
做好各種設定後，按下「儲存欄位設定」即可。
↓ 為內容類型新增插入圖片的欄位時, 記得做好Insert的設定
4. 設定欄位顯示
同樣到該內容類型裡，按下「顯示欄位」標簽，做好各種相關的顯示設定。
5. 設定使用者權限
6. 修改程式碼
照理說，做好以上設定之後應該可以開始讓使用者在文章中直接上傳與插入具有Lightbox2特效的圖片了〔到此你也可以直接試用看看，若沒問題那麼此步驟可以省略〕。
↓ 完成所有的設定之後現在可以在貼文時直接上傳圖片
↓ 上傳之後直接按下"insert"（插入）就把具光箱特效的圖片插入到文章中了, 而如果你在內容類型的欄位設定裡還增加了Origin（原圖）或是teaser（縮圖）等選項, 使用者也可選擇以這些不同樣式將圖片插入文章裡
不過，好像Lightbox2程式有個小小錯誤，我試了很久，在插入圖片之後一直有誤，會出現一段多餘的html碼之外，光箱特效也不正常。
我找了論壇很多技術討論，的確有很多人遇到和我一樣的問題，有人說是輸入法設定問題，只要去設定輸入法的過濾器（filter）即可解決。此方法建議使用者把所有過濾器停用，只開啟Lightbox2的過濾器。
但我試了這個方法，也不管用。使用者可以試試，或許有些人此法管用。
最後我找到的終極解決方法則是修改模組的一段程式碼。
在解壓縮的Lightbox2檔案夾裡找到lightbox2-insert-image.tpl.php檔案，然後以文字編輯器開啟（建議使用Notepad++，不要使用Windows附的記事本，不然可能會有PHP程式的執行問題）
找到最後一行的這段程式碼
＜a rel="lightbox[group1][__description__＜?php print $download_link ?＞]"…….
直接把＜?php print $download_link ?＞一段刪除即可。而如果你要讓光箱特效直接加入上傳檔案時所輸入的圖說，也可把這段程式碼改為＜?php print $title ?＞，就是讓PHP改為輸入上傳圖片時使用者所輸入的文字說明。
儲存修改好的檔案後，再把檔案上傳到網站上對應的位置即可。
結語：
Lightbox的應用其實還想當的廣，除了可以為lighbox加入更多各式不同的屬性，也可將它運用在更多的介面上：例如使用者註冊或登入的區塊，或是站內的Gmap瀏覽。
甚至在進階的使用上還可以與Flickr等外部相簿結合。
………這些應用看官若有空可以自行去研究。
至於其他更多的屬性指令與應用方式，可以在下載模組後，檔案夾內的README.txt裡找到。
沒有留言:
張貼留言