什麼是 Lightbox 特效? 試試點擊下面的圖片便能明白。
Lightbox 是一套用來展示網頁圖片的 Javascript 程式碼，可以很簡單地添加在網頁上。只要你的網頁連結到 Lightbox 的 Stylesheet 及Javascript 程式檔，然後在網頁圖片上的超連結加上適當的語法，便能令網頁展示大圖時產生 Lightbox 特效。
Lightbox 最初由 Lokesh Dhakar 開發，當這個好玩的意念開始在網上流傳之後，許多程式設計師便紛紛仿效改良，製作其獨特的版本並將功能鄺充，現在如果以 Lightbox 這關鍵字於搜尋器上搜尋，不難找到其他如 ThickBox，SlimBox 等不同的 Lightbox 版本。
因為不同版本的 Lightbox 可能會支援不同的圖檔超連結語法，如果為部落格中的圖檔超連結添加了某個語法，經過一段時間之後發現更加正點但不能支援現有語法的 Lightbox 版本，到時便要煩惱如何修改大量添加了舊有語法的超連結了。因此建議在部落格添加這個特效前最好先行測試各個版本的功能，選定最合心意的版本後才為部落格進行裝修工程。
你現正瀏覽的這個部落格所採用的是一個名為 Lightbox Plus 的版本。這個版本添加了原祖 Lightbox 2 版本所沒有的自動跟視窗放大縮小的功能，支援原祖版本的超連結語法，界面亦算簡單易明，如果你對這個版本有興趣，可到 http://serennz.sakura.ne.jp/toybox/lightbox/ 下載測試。
當找到合適的 Lightbox 版本後，第一件事先要找一個網上空間寄存 Lightbox 的程式檔。不同版本的 Lightbox 所需上傳的檔案各有不同。就以現在我所用的 Lightbox Plus 版本為例，當我下載及解壓檔案後，我只需上傳 sample 資料夾內的 resource 資料夾及資料夾內的所有內容到我的網上空間便可以；因為我想日後容易辨認我所上傳資料夾的內容，所以我將 resource 資料夾在我的網上空間改名為 lightboxplus。
接着登入 blogger，到版面配置 => 修改 HTML，在 "修改範本" 視窗中搜尋 <head> tag，在 <head> tag 下添加以下指向網上空間中 lightbox.css 及 lightbox_plus.js 的語法 (只加插紅色部份)。
如果你懶得自己再找網上寄存空間，可以直接使用以上語法借用寄存在我的網上空間內的程式檔。
因為現今很多免費的網上寄存空間都不能支援遠端圖檔存取，如果你是使用自己的寄存空間，特別是一些免費的寄存空間，很大機會你要另覓途徑儲存 Lightbox 程式所需的圖檔。以這個部落格所用的 Lightbox plus 為例，因為 Blogger 可以存取 Picasa 上的圖檔，所以我先將 resource 資料夾內的所有圖檔上傳到一個 Picasa 的 Album 內，並記下每個圖檔在 Picasa Album 內的超連結位置。
之後在 Windows 內用記事本 (notepad) 打開 resource 資料夾內的 lightbox_plus.js 檔案，在檔案最尾段可以找到以下 function 的語法，將語法內原本指向 resource 資料夾內各 gif 圖檔的超連結改成 Picasa Album 內的超連結，如下 :
完成後再將 lightbox_plus.js 檔上傳到網上空間。
以上準備功夫完成後便可在部落格文章內為各圖片超連結添加 Lightbox 語法。最常用的圖片超連結語法有兩個；第一個是為單一圖片添加 Lightbox 特效；方法是在 <a ref ...> tag 中加上 rel="lightbox" 語法，例子如下 :
另一個常用的語法是為一組圖片添加 Lightbox 特效；方法是在 <a ref ...> tag 中加上 rel="lightbox[group]" 語法，即所有同組的圖檔連結以相同的 group 名稱命名，這樣當游標滑入放大了的影像範圍時，影像便會顯示 "下一張" 或 "上一張" 相片的圖示，例子如下 :
其他的語法通常會在各個 Lightbox 版本的下載網站中詳列。看到這裏，有沒有興趣跟我一樣，為自己的部落格加上這個好玩的特效呢 ~
~。
Lightbox 是一套用來展示網頁圖片的 Javascript 程式碼，可以很簡單地添加在網頁上。只要你的網頁連結到 Lightbox 的 Stylesheet 及Javascript 程式檔，然後在網頁圖片上的超連結加上適當的語法，便能令網頁展示大圖時產生 Lightbox 特效。
Lightbox 最初由 Lokesh Dhakar 開發，當這個好玩的意念開始在網上流傳之後，許多程式設計師便紛紛仿效改良，製作其獨特的版本並將功能鄺充，現在如果以 Lightbox 這關鍵字於搜尋器上搜尋，不難找到其他如 ThickBox，SlimBox 等不同的 Lightbox 版本。
因為不同版本的 Lightbox 可能會支援不同的圖檔超連結語法，如果為部落格中的圖檔超連結添加了某個語法，經過一段時間之後發現更加正點但不能支援現有語法的 Lightbox 版本，到時便要煩惱如何修改大量添加了舊有語法的超連結了。因此建議在部落格添加這個特效前最好先行測試各個版本的功能，選定最合心意的版本後才為部落格進行裝修工程。
你現正瀏覽的這個部落格所採用的是一個名為 Lightbox Plus 的版本。這個版本添加了原祖 Lightbox 2 版本所沒有的自動跟視窗放大縮小的功能，支援原祖版本的超連結語法，界面亦算簡單易明，如果你對這個版本有興趣，可到 http://serennz.sakura.ne.jp/toybox/lightbox/ 下載測試。
當找到合適的 Lightbox 版本後，第一件事先要找一個網上空間寄存 Lightbox 的程式檔。不同版本的 Lightbox 所需上傳的檔案各有不同。就以現在我所用的 Lightbox Plus 版本為例，當我下載及解壓檔案後，我只需上傳 sample 資料夾內的 resource 資料夾及資料夾內的所有內容到我的網上空間便可以；因為我想日後容易辨認我所上傳資料夾的內容，所以我將 resource 資料夾在我的網上空間改名為 lightboxplus。
接着登入 blogger，到版面配置 => 修改 HTML，在 "修改範本" 視窗中搜尋 <head> tag，在 <head> tag 下添加以下指向網上空間中 lightbox.css 及 lightbox_plus.js 的語法 (只加插紅色部份)。
... <head>
<!--lightboxadd-on START-->
<link href='http://chiwawah.web.fc2.com/lightboxplus/lightbox.css' media='screen,tv' rel='stylesheet' type='text/css'/>
<script charset='UTF-8' src='http://chiwawah.web.fc2.com/lightboxplus/lightbox_plus.js' type='text/javascript'/>
<!--lightboxadd-on END-->
<b:include data='blog' name='all-head-content'/>...
<!--lightboxadd-on START-->
<link href='http://chiwawah.web.fc2.com/lightboxplus/lightbox.css' media='screen,tv' rel='stylesheet' type='text/css'/>
<script charset='UTF-8' src='http://chiwawah.web.fc2.com/lightboxplus/lightbox_plus.js' type='text/javascript'/>
<!--lightboxadd-on END-->
<b:include data='blog' name='all-head-content'/>...
如果你懶得自己再找網上寄存空間，可以直接使用以上語法借用寄存在我的網上空間內的程式檔。
因為現今很多免費的網上寄存空間都不能支援遠端圖檔存取，如果你是使用自己的寄存空間，特別是一些免費的寄存空間，很大機會你要另覓途徑儲存 Lightbox 程式所需的圖檔。以這個部落格所用的 Lightbox plus 為例，因為 Blogger 可以存取 Picasa 上的圖檔，所以我先將 resource 資料夾內的所有圖檔上傳到一個 Picasa 的 Album 內，並記下每個圖檔在 Picasa Album 內的超連結位置。
之後在 Windows 內用記事本 (notepad) 打開 resource 資料夾內的 lightbox_plus.js 檔案，在檔案最尾段可以找到以下 function 的語法，將語法內原本指向 resource 資料夾內各 gif 圖檔的超連結改成 Picasa Album 內的超連結，如下 :
Spica.Event.run(function() {
var lightbox = new Lightbox({
loadingimg:'resource/loading.gif',
loadingimg:'http://lh5.ggpht.com/_eRY1Cgd9sl8/SxnQFaeqYfI/AAAAAAAADnA/pEwq4vIulo0/loading.gif',
expandimg:'resource/expand.gif',
expandimg:'http://lh6.ggpht.com/_eRY1Cgd9sl8/SxnQFDhgOGI/AAAAAAAADm8/YzCJCFvWbKg/expand.gif',
shrinkimg:'resource/shrink.gif',
shrinkimg:'http://lh5.ggpht.com/_eRY1Cgd9sl8/SxnQK2kQYFI/AAAAAAAADnM/JeDmZTB8MDo/shrink.gif',
blankimg:'resource/blank.gif',
blankimg:'http://lh6.ggpht.com/_eRY1Cgd9sl8/SxnQEzJV4XI/AAAAAAAADm0/2x8Uj9eJdKU/blank.gif',
previmg:'resource/prev.gif',
previmg:'http://lh3.ggpht.com/_eRY1Cgd9sl8/SxnQKguLwpI/AAAAAAAADnI/7ZqAuwV5b24/prev.gif',
nextimg:'resource/next.gif',
nextimg:'http://lh4.ggpht.com/_eRY1Cgd9sl8/SxnQFon85BI/AAAAAAAADnE/RYCVJlV00fc/next.gif',
closeimg:'resource/close.gif',
closeimg:'http://lh4.ggpht.com/_eRY1Cgd9sl8/SxnQFF0y6oI/AAAAAAAADm4/nPJ7MJdj93M/close.gif',
effectimg:'resource/zzoop.gif',
effectimg:'http://lh5.ggpht.com/_eRY1Cgd9sl8/SxnQK8rYLnI/AAAAAAAADnQ/_89vZBllYqY/zzoop.gif',
effectpos:{x:-40,y:-20},
effectclass:'effectable',
resizable:true,
animation:true
});
});
var lightbox = new Lightbox({
loadingimg:'http://lh5.ggpht.com/_eRY1Cgd9sl8/SxnQFaeqYfI/AAAAAAAADnA/pEwq4vIulo0/loading.gif',
expandimg:'http://lh6.ggpht.com/_eRY1Cgd9sl8/SxnQFDhgOGI/AAAAAAAADm8/YzCJCFvWbKg/expand.gif',
shrinkimg:'http://lh5.ggpht.com/_eRY1Cgd9sl8/SxnQK2kQYFI/AAAAAAAADnM/JeDmZTB8MDo/shrink.gif',
blankimg:'http://lh6.ggpht.com/_eRY1Cgd9sl8/SxnQEzJV4XI/AAAAAAAADm0/2x8Uj9eJdKU/blank.gif',
previmg:'http://lh3.ggpht.com/_eRY1Cgd9sl8/SxnQKguLwpI/AAAAAAAADnI/7ZqAuwV5b24/prev.gif',
nextimg:'http://lh4.ggpht.com/_eRY1Cgd9sl8/SxnQFon85BI/AAAAAAAADnE/RYCVJlV00fc/next.gif',
closeimg:'http://lh4.ggpht.com/_eRY1Cgd9sl8/SxnQFF0y6oI/AAAAAAAADm4/nPJ7MJdj93M/close.gif',
effectimg:'http://lh5.ggpht.com/_eRY1Cgd9sl8/SxnQK8rYLnI/AAAAAAAADnQ/_89vZBllYqY/zzoop.gif',
effectpos:{x:-40,y:-20},
effectclass:'effectable',
resizable:true,
animation:true
});
});
完成後再將 lightbox_plus.js 檔上傳到網上空間。
以上準備功夫完成後便可在部落格文章內為各圖片超連結添加 Lightbox 語法。最常用的圖片超連結語法有兩個；第一個是為單一圖片添加 Lightbox 特效；方法是在 <a ref ...> tag 中加上 rel="lightbox" 語法，例子如下 :
<a href="http://lh4.ggpht.com/_eRY1Cgd9sl8/SxpmfxaS_5I/AAAAAAAADzI/-fKT2NC4Bns/IMG_1843.jpg" rel="lightbox">
<img height="260" src="http://lh4.ggpht.com/_eRY1Cgd9sl8/SxpmfxaS_5I/AAAAAAAADzI/-fKT2NC4Bns/IMG_1843.jpg" style="border-width: 1px;" width="390" />
</a>
<img height="260" src="http://lh4.ggpht.com/_eRY1Cgd9sl8/SxpmfxaS_5I/AAAAAAAADzI/-fKT2NC4Bns/IMG_1843.jpg" style="border-width: 1px;" width="390" />
</a>
另一個常用的語法是為一組圖片添加 Lightbox 特效；方法是在 <a ref ...> tag 中加上 rel="lightbox[group]" 語法，即所有同組的圖檔連結以相同的 group 名稱命名，這樣當游標滑入放大了的影像範圍時，影像便會顯示 "下一張" 或 "上一張" 相片的圖示，例子如下 :
<a href="http://lh3.ggpht.com/_eRY1Cgd9sl8/SxpsK0Rx0sI/AAAAAAAAD_o/taEzMRuo9hY/CRW_2637.jpg" rel="lightbox[1]">
<img height="260" src="http://lh3.ggpht.com/_eRY1Cgd9sl8/SxpsK0Rx0sI/AAAAAAAAD_o/taEzMRuo9hY/CRW_2637.jpg" style="border-width: 1px;" width="390" />
</a>
<a href="http://lh3.ggpht.com/_eRY1Cgd9sl8/SxpkReVTR7I/AAAAAAAADuM/6WqASE2HIPc/IMG_1714.jpg" rel="lightbox[1]">
<img height="260" src="http://lh3.ggpht.com/_eRY1Cgd9sl8/SxpkReVTR7I/AAAAAAAADuM/6WqASE2HIPc/IMG_1714.jpg" style="border-width: 1px;" width="390" />
</a>
<a href="http://lh6.ggpht.com/_eRY1Cgd9sl8/Sxpmi8cYGII/AAAAAAAADzQ/9033ITYp82I/IMG_1856.jpg" rel="lightbox[1]">
<img height="260" src="http://lh6.ggpht.com/_eRY1Cgd9sl8/Sxpmi8cYGII/AAAAAAAADzQ/9033ITYp82I/IMG_1856.jpg" style="border-width: 1px;" width="390" />
</a>
<img height="260" src="http://lh3.ggpht.com/_eRY1Cgd9sl8/SxpsK0Rx0sI/AAAAAAAAD_o/taEzMRuo9hY/CRW_2637.jpg" style="border-width: 1px;" width="390" />
</a>
<a href="http://lh3.ggpht.com/_eRY1Cgd9sl8/SxpkReVTR7I/AAAAAAAADuM/6WqASE2HIPc/IMG_1714.jpg" rel="lightbox[1]">
<img height="260" src="http://lh3.ggpht.com/_eRY1Cgd9sl8/SxpkReVTR7I/AAAAAAAADuM/6WqASE2HIPc/IMG_1714.jpg" style="border-width: 1px;" width="390" />
</a>
<a href="http://lh6.ggpht.com/_eRY1Cgd9sl8/Sxpmi8cYGII/AAAAAAAADzQ/9033ITYp82I/IMG_1856.jpg" rel="lightbox[1]">
<img height="260" src="http://lh6.ggpht.com/_eRY1Cgd9sl8/Sxpmi8cYGII/AAAAAAAADzQ/9033ITYp82I/IMG_1856.jpg" style="border-width: 1px;" width="390" />
</a>
其他的語法通常會在各個 Lightbox 版本的下載網站中詳列。看到這裏，有沒有興趣跟我一樣，為自己的部落格加上這個好玩的特效呢 ~
~。
您好:
回覆刪除看了您的文章受益很多
我也照您的步驟去做...........
但是有發生一個問題想請問您
我把lightbox的8個gif檔案上傳之後.......變成是jpg檔案
這我應該如何解決呢
麻煩您教教我
謝謝您
使用 Internet Explorer 6 上載圖檔到 Picasa 會出現這樣的情況。你可以試試改用 Firefox 上傳圖檔到 Picasa ;)。
回覆刪除您好:
回覆刪除很高興您的幫忙解答......非常感謝
小弟我現在又有一個問題想要請問您
關於群組照片....如果我想要讓他在部落格上是左右各一張顯示...而不是像您的一張一張往下排......我應該如何做呢
我剛剛一直在是都是不出結果
如果您有方式可以解決麻煩您教我
謝謝您
你的意思是否像 "這篇文章" 最尾段那四張甜品圖片般的排法? 假設你要的是類似的排法，那先看看加上 lightbox effect 之後那四張圖片的 HTML 原始碼:
回覆刪除<a href="http://lh5.ggpht.com/wjKcx4dYn2w/IMG_5517.jpg" rel="lightbox[1]">
<img height="285" width="190" src="http://lh5.ggpht.com/wjKcx4dYn2w/IMG_5517.jpg" style="border-width: 1px;" />
</a>
<a href="http://lh6.ggpht.com/45sktgXP97I/IMG_5520.jpg" rel="lightbox[1]">
<img height="285" width="190" src="http://lh6.ggpht.com/45sktgXP97I/IMG_5520.jpg" style="border-width: 1px;" />
</a>
<br />
<a href="http://lh4.ggpht.com/9I7yrhDG3HA/IMG_5526.jpg" rel="lightbox[1]">
<img height="285" width="190" src="http://lh4.ggpht.com/9I7yrhDG3HA/IMG_5526.jpg" style="border-width: 1px;" />
</a>
<a href="http://lh3.ggpht.com/XsITDKcb9Lw/IMG_5530.jpg" rel="lightbox[1]">
<img height="285" width="190" src="http://lh3.ggpht.com/XsITDKcb9Lw/IMG_5530.jpg" style="border-width: 1px;" />
</a>
<br /><br />
當你輸入 blog 文時要轉到 "修改 HTML" view 才可直接改動文章的 HTML 編碼。
第二張和第三張圖片之間加插了一個 <br/> tag，因此第三張圖片會跳到下一行顯示。兩張圖片之間如果以一個或多個 <br/> tag 分隔，兩張圖片便會分開兩行顯示，之間的 <br/> tag 數量越多，分隔的距離便越遠。
如果兩張圖片之間沒有任何 HTML 碼，即第一組 <a href=...><img height ...></a> 直接連到下一組的 <a href=...><img height ...></a>，那兩張圖片便可在同一行顯示。但因應不同的 blogger template 和瀏覽器，這樣做可能會使兩張圖片黏在一起顯示，因此我會像第一張和第二張圖片般，在兩張圖片之間加上一個或以上的 (空白) 碼，使兩張圖片之間必定有一個或以上的空白分隔。
另外要注意同一行中每個 <img> tag 中 width="XXX" 的參數值。如果同一行中所有圖片的 width 參數值總和大於 template 內文可容納的闊度，右排的圖片便會自動跳到下一行顯示。
本篇借我轉貼:)
回覆刪除感謝!!
http://dsinformationblog.blogspot.com/
准奏 :D
回覆刪除