豆漿先前在這篇有使用紀錄，我想用這篇文章筆記自己使用 Lightbox 這個光箱外掛的心得，。
什麼是 Lightbox？
它其實是一種在blog展示自己圖片特效的 JavaScript 程式，在網路上可以看到許多應用與教學。
還是不知道是什麼東西，直接點擊下面的圖：
在部落格上是顯示小圖，不過點擊後會顯示大的圖檔，而呈現光箱（ Lightbox ）的效果，由於它檔案不大執行效率也不錯，在寫文章時候只要插入小圖，這樣多少能減少載入網頁的時間，所以在網路上非常受到部落客的喜愛，同時在 Wordpress 也有相關的 Plugin 外掛。
如果是blogger、pixnet等可以使用插件或網頁元素執行html、 JavaScript 程式的BSP，則適用以下方式：
豆漿不寫教學，由於網路很多前輩分享過了，如果懶得找，豆漿提供幾個供參考，當然自己也作紀錄。
良人的大秘寶 » 在Blogger Beta使用Lightbox顯示圖片
靖.技場 » Lightbox JS --- 光箱特效使用教學
swf.com.tw » 使用LightBox展示線上影像
JH2 » [網頁特效小偏方] Lightbox圖片展示 (疑難雜症)
需要注意的地方
- 如果下載下來的檔案，上傳到自己空間，在部落格<head></head>中設定的路徑要正確，並且注意設定lightbox.js及lightbox.css這兩個文件中所有的圖片路徑。不然Lightbox就會有缺圖或無效等情況發生。
- 如果用別人空間要小心注意，因為可能流量太大或者檔案不見，導致自己部落格讀不到js、css，或讀比較慢，最後Lightbox的效果無法展示，這時候就尷尬了。
- 還有Lightbox需要等完整載入後，再點圖片才能顯現效果，不然會直接連結到圖片原始網頁。
以上是我在使用過程遇到的問題。
如果是使用Wordpress 的部落客，則可以使用下列三個Plugins：
如果還不夠可以參考這篇有其他類似功能的外掛。
使用心得可以參考Sinchen大寫得這篇WordPress 推薦Lightbox外掛jQuery Lightbox Plus。
個人是使用Lightbox-2，可以在moki’s首頁右邊看到我同時結合flickrrss這個Plugin的效果（關於flickrrss這個使用心得容許我下次寫了），使用這個Plugin最主要原因是因為它有個auto-lightboxing’ of image links的功能，它自動幫你把圖片組合成為以連續性的光箱式的展示，也就是你目前所在頁面所有圖片作連續光箱展示。
教學部份很簡單（其實我自己也非常懶得再貼圖了）
1.將下載回來的檔案解壓縮。
2.上傳到 /wp-content/plugins/下 的資料夾。
3.在後台啟動外掛即可。
4.在插件設置頁勾選Auto-lightbox image links。
4.最後在自己在插入的小圖設置連結到原始圖。
至於有個不用插小圖的小技巧：
在黑白天空網站這篇寫到
<a href=”图片地址“><img class=”alignnone size-thumbnail wp-image-692″ title=”标题” src=图片地址 alt=”标题” width=”144″ height=”81″ /></a>
直接定義圖片的大小，這樣也就不用插縮圖了，真的蠻方便的。
不過由於豆漿還有結合Windows Live Writer（WLW）內的外掛 LightBox_SimplePlugin ，所以在撰寫文章不用在寫rel="lightbox"這個語法了。
寫到這裡應該大致上不會有任何問題，有問題也別找我，基本上網路都找得到，因為我本身沒資訊背景，只是喜歡玩部落格而已。
發表文章
0 意見:
張貼留言