艾爾文的攝影寫真

有人問我，網頁上彈出圖片的效果是如何做出來的？
這樣的效果有很多種小程式可以做到，
像是 lightbox、lytebox或是 thickbox，其實都是相同的。

最後我選擇了 thickbox 來展示圖片，
原因，老實說我也忘了…

這類的小程式不只看起來很酷，
更重要的是，它突破了部落格板型的限制，
照片不用再屈就於本文欄位的寬度了！

跟著我一步步來玩 thickbox 吧！

步驟 1．將jquery.js 基本函式庫、thickbox.js 主程式、thickbox.css 樣式檔和動畫檔 loadingAnimation.gif 放入個人網路空間

相信第一步就讓很人不知所措了吧！
如果不知道怎麼伸請個人的網路空間，
可以先用我專為各位伸請的：
http://elwynn4thickbox.googlepages.com

已經存放了這四種檔案：
http://elwynn4thickbox.googlepages.com/jquery.js
http://elwynn4thickbox.googlepages.com/thickbox.js
http://elwynn4thickbox.googlepages.com/thickbox.css
http://elwynn4thickbox.googlepages.com/loadingAnimation.gif

有個人網頁空間的朋友，下載後放入自己的空間就可以了。

有些網頁空間，圖片檔是不能做外部連結的喔，要注意！

步驟 2．修改thickbox.js 中 loadingAnimation.gif 位置

在將下載的 thickbox.js 尋找 loadingAnimation.gif 的位置，
如果有自己的網路空間，請修改到你存放這個動畫檔的位置，
而用我的空間的，可以略過這個步驟。
 

可以用 Ctrl + F 來快速尋找，鍵入“loadingAnimation.gif”，就可以找到原始連結的位置了！

步驟 3．在部落格中插入程式庫

以我們痞客邦為例，

後台-->基本/進階設定-->部落格描述，這個大框框加入這幾行紅色字：

<script type="text/javascript" src="http://elwynn4thickbox.googlepages.com/jquery.js"></script>
<script type="text/javascript" src="http://elwynn4thickbox.googlepages.com/thickbox.js"></script>
<link rel="stylesheet" href="http://elwynn4thickbox.googlepages.com/thickbox.css" type="text/css" media="screen">

部落格描述可以放入程式碼，而且載入順序較本文高，相信有用過google analytics 的朋友都不陌生，可以好好利用喔。

 步驟4．設定要做效果的圖片

在連結的語法中加入紅色的字

class="thickbox" rel="gallery"

其中gallery表示將多張圖片設定為一組，
而gallery可以設定為別的文字，像 abc 之類的。

thickbox 當然也可以顯示單一圖片，把rel="gallery"拿掉就可以了。

結語

thickbox個人認為有點美中不足的是，
圖片最寬似乎限制在800px，
修改設定要改寫整個程式…頭痛。

有問題歡迎留言喔！

最詳細的官方網站：http://jquery.com/demo/thickbox/
詳細的教學：http://fennser.pixnet.net/blog/post/9076292
更多的應用：http://www.hsiu28.net/html/jss.php?id=19