Lightbox 特效使用說明

Lightbox 特效不僅是點小圖看大圖，同時會產生遮罩的效果，讓使用者在部落格上看圖片的體驗往上提升。效果可以看我上一篇文章，或是官方的 demo。

往後大家在 post 文章時，會預設出現一段文字，長這樣：
<a href="大圖位置" rel="lightbox[群組名稱]" title="設定標題"><img src="小圖位置" alt="提示文字" width=150 border="0"/></a>

大圖位置：
即特效展示的大圖，如果有使用 picasa 網路相簿，就是在單張圖片的頁面，按右鍵，點選 copy image location 之後，把圖片所在的網址貼進去，變成類似 href="http://ooo.picasa.xxx.JPG?imgmax=512" 這個樣子。（如果想放更大張的圖片，可以把 ?imgmax=512 刪掉）

小圖位置：
部落格文章顯示的小圖。我是用 picasa 相簿，一樣 copy image location 取得圖片網址，把 ?imgmax=512 去掉，變成 src="http://ooo.picasa.xxx.JPG"，再用 width=150 把圖片的寬度縮成 150 px（長度會自動等比例縮小）。 width 的數值可以按照需要自行調整。

title 與 alt：
可以打上輔助文字說明。

如果想顯示單篇文章：
把 rel="lightbox[群組名稱]" 改成 rel="lightbox" 即可。

如果想一次顯示多張圖片：
在每張圖片都設定一樣的 [群組名稱]，我在上一篇文章的群組名稱是 [rose]，可以隨便取，中括號不能去掉喔。前半段的 code 樣子像這樣：
<a href="圖片1.jpg" rel="lightbox[rose]">圖片 #1</a>
<a href="圖片2.jpg" rel="lightbox[rose]">圖片 #2</a>
<a href="圖片3.jpg" rel="lightbox[rose]">圖片 #3</a>

使用其他相簿的作法應該也是大同小異，希望新功能不會造成大家的困擾，如果不需要的話，記得在寫文章的時候把那一段 code 刪掉喔 ：）

參考文章：Lightbox JS --- 光箱特效使用教學