Lightbox JS v2.0
之前寫過這篇Lightbox js in 華龍部落格，Lightobx JS的作者又有新的作品了，就是這個Lightbox JS v2.0。
更棒的圖片展示效果，可以單張圖片展示，也可以多張圖片同時展示，也可以在圖片左下角顯示圖片說明，按下下方的圖片看看效果吧！
在華龍部落格裡，我已設定完成，若有想要使用這樣的效果的老師們，你唯一要做的事，就是修改您的模版裡的 header.template 這個檔案。
1.「登入管理介面」/「個人網誌設定 」/「網誌模版編輯器」
2.編輯你的個人模版裡的 header.template 這個檔案
3.在</title>後面按下鍵盤的「Enter」鍵來空行，再將底下的四段文字貼在<head>之後。
<script type="text/javascript" src="{$url->getUrl("/lightbox2/js/prototype.js")}"></script>
<script type="text/javascript" src="{$url->getUrl("/lightbox2/js/scriptaculous.js?load=effects")}"></script>
<script type="text/javascript" src="{$url->getUrl("/lightbox2/js/lightbox.js")}"></script>
<link rel="stylesheet" href="{$url->getUrl("/lightbox2/css/lightbox.css")}" type="text/css" media="screen" />
日後，你不必再做任何的修改，在發表文章時，只要
- 先將圖片上傳到檔案中心
- 在插入圖片時只要按下
- 依你的需要按下新增檔案預覽小圖或中圖
若您是LifeType網誌的管理員，您可以怎樣做呢？
1.下載Lightbox JS v2.0 裡所提供的檔案
解壓縮後產生一個名為 lightbox2.02 的目錄（在我這裡我又將這目錄自行改名為lightbox2），將該目錄放在 lifetype 的目錄下。
底下是我以putty的操作步驟
- cd /var/www/html/plog
- wget http://www.huddletogether.com/projects/lightbox2/lightbox2.02.zip
- unzip lightbox2.02.zip
- mv lightbox2.02 lightbox2
在約第62行的地方，將兩張圖片的路徑改成絕對路徑，不用相對路徑的原因，是因為LifeType裡有閱讀全文的功能，按下閱讀全文後，網址會改變，若用相對路徑，就會造成這兩張圖片因路徑錯誤的關係而看不到圖片。
3.修改 /lightbox2/css/lightbox.css
在 #imageData 裡增加一行字型大小的設定，這個設定是參考 Magicbug 在論壇上的說明來改的。
前面說過，Lightbox v2.0可以在圖片上顯示出圖片的說明文字，但原本css的設定，以中文字來說可能會太小，所以自行增加一行 font 大小的設定，讓圖片的說明文字大一些，我是設定為11pt，你可以依照自己的喜好來做改變。
#imageData{4.修改 /js/tinymce/jscripts/tiny_mce/tiny_mce-plog-resourcelist.js
padding:0 10px;
font: 11pt Verdana, Helvetica, sans-serif;
}
如下圖所示，在兩個位置上加上底下的文字
rel="lightbox[roadtrip]" title="'+resourceDesc+'"
加上 rel="lightbox[roadtrip]" 這一段，是為了讓lightbox可以在同一網頁下，呈現多張圖片同時展示的效果，若你希望圖片都是一張一張地單獨展示，這裡只要加上 rel="lightbox" 就可以。
至於 title="'+resourceDesc+'"，是為了在lightbox所展示的圖片左下角顯示出「圖片的說明文字」。
那在LifeType裡的圖片說明文字在哪裡輸入呢？
當我們上傳圖片到檔案中心時，有個「分類描述」的欄位，這個欄位就是圖片的說明文字了。
你可以按下上面的圖片，在左下角就會顯示「上傳圖片時加上圖片說明」這樣的文字說明了。
5.修改 js/tinymce/jscripts/tiny_mce/tiny_mce-plog.js
在extended_valid_elements裡的 a 加上 rel ，若沒有加上rel，tinyMCE會認為rel不是合法的參數，所以會自動過濾掉了，這樣就看不到lightbox的效果了。
就這樣了，完工。
阿欣老師：
救命啊~~~><"
找了一堆教學問了一堆人.連新浪部落的問題編輯部我也去問了好久都沒下文...或者就是沒有我要的答案...所以想來麻煩您!
光箱特效 Lightbox JS V2.0 是目前網頁常見的圖片瀏覽功能
重點是該如何使用?
例如 : 我想使用於新浪部落格裡 ...
讓圖片點擊後產生圖片自動展開的效果 ...
因為實在是搜尋不到實際我要的教學方法
有人可以白話的告訴我正確的使用方法嗎 ?
實在是問不到人了...拜託分享一下!
我會十分感激的!
或是利用MSN與我交流一下比較清楚...謝謝!
我的 MSN : fpc650813@hotmail.com
我會了，要在"[]"裡面加上群組，謝謝囉~~
我要怎麼設定才可以用出images set的功能，我的照片沒辨法用不出next這個方式看下一張圖，可以教一下嗎??謝謝
阿欣老師：
我依你的步驟裝了lightbox js2.0特效
圖片部份沒問題
但在文章內容中，連結的若是檔案，點選連結時也會用lightbox js2.0的特效來呈現，且是一片空白，lightbox應該只針對圖片，請問阿欣老師，不知你是否碰過這樣的問題，又該如何解決呢？
lamiip
To CHING:
其他網誌也可以使用，不過部知道你的blog平台是哪一種，假如也是LIfeType，這裡有兩篇文章可以先參考看看。
Lightbox JS for LifeType
在LifeType上使用Lightbox JS
To 萌芽:
你可以參考看看bubble的這一篇文章，裡頭有提到這個網頁，可以好好研究看看。
請問別的網誌有辦法使用嗎?
感謝阿欣老師的提醒
已經成功了
原來是匆匆上傳
直接insert image了
謝謝!
另外想請教
插入音樂的語法
是否因檔案類型不同
而有差異呢?
因為看到很多種不同語法
頭昏眼花
重點是
底下的語法
竟然會跑很久
然後唱到一半就跳掉了
沒聲音了
可能是什麼原因呢?
不好意思,語法實在很弱!
阿欣老師您好
之前研習時就套用了這個效果
可是最近發生詭異的狀況
就是
最近加入了照片之後
都沒有再出現同樣效果
去檢查模板
那些字都在啊
不知道是發生什麼問題
要向你求救啦!
http://plog.tcc.edu.tw/272
不好意思!
麻煩您了!
Hi,enigma:
您可以先看看這裡。
您的文章只要輸入在「延伸內文」的地方就可以了。
一進首頁的時候，文章只會顯示部份內容，
按了『顯示全文』才會顯示所有文件，請
問這功能是怎麼用的？
感恩啊
好炫的效果!! 謝謝教學分享!!
好東西，先收下囉 ^_^
James.