發卡布洛

有網友提到要如何在痞客邦使用這個效果，我想我就針對痞客邦的安裝方法講解一下好了，功力強的網友可以直接參考OECSPACE的這篇教學，真的不懂的話再來服用我這篇吧！

首先請下載：

下載完之後解壓縮，打開 lightbox 後會有三個資料夾，請打開 js 下的 lightbox.js，找到第49與50行。

把這兩個圖片的路徑改成你上傳空間的網址，例如我的空間是http://feka.hostrator.com，就改成：

fileLoadingImage: 'http://feka.hostrator.com/lightbox/images/loading.gif',
fileBottomNavCloseImage: 'http://feka.hostrator.com/lightbox/images/closelabel.gif',

改好之後，將 lightbox 整個資料夾傳到你的網頁空間。

接著，請在痞客邦的側邊欄位設定頁尾描述的最後面加入以下程式碼：

<script type="text/javascript" src="你的空間網址/lightbox/js/prototype.js"></script>  
<script type="text/javascript" src="你的空間網址/lightbox/js/scriptaculous.js?load=effects,builder"></script>  
<script type="text/javascript" src="你的空間網址/lightbox/js/lightbox.js"></script>  
<link rel="stylesheet" href="你的空間網址/lightbox/css/lightbox.css" type="text/css" media="screen">   

這樣就安裝完成了！

使用的時候，如果網誌中只有一張圖片要套用這個效果，請使用這個語法：

<a href="photo.jpg" rel="lightbox" title="圖片註解文字" Lightbox JS </a>

其中， href="photo.jpg" ，這個 photo.jpg 請放置圖片的網址，而Lightbox JS則是顯示的連結文字，套用結果如下：

Lightbox JS

可能會有人覺得奇怪…怎麼不是顯示小圖而是文字呢？那是因為，在剛剛的語法裡頭的連結就是文字= ="，也就是說這程式並不會聰明到自動幫你縮圖…而是你要另外做一張小圖來當超連結，語法如下：

<a href="photo.jpg" rel="lightbox" title="圖片註解文字"><img src="photo.jpg小圖網址" border="0"></a>

套用結果如下：

另外，如果你要在一篇blog中放置不只一張的圖片，可以使用下面這個語法：

<a href="photo1.jpg" rel="lightbox[roadtrip]" title="圖片註解文字">image #1</a>  
<a href="photo2.jpg" rel="lightbox[roadtrip]" title="圖片註解文字">image #2</a>  
<a href="photo3.jpg" rel="lightbox[roadtrip]" title="圖片註解文字">image #3</a>

這個語法跟上述語法只有一個地方不同，那就是 rel="lightbox" 變成了 rel="lightbox[roadtrip]" ，這樣的改變是為了讓這三張圖片可以切換上下頁，但他一樣只會顯示文字，如果想顯示小圖片的話，請參考上面的方法做修改。

<a href="photo1.jpg" rel="lightbox[roadtrip]" title="圖片註解文字"><img src="photo1.jpg小圖網址" border="0"></a>  
<a href="photo2.jpg" rel="lightbox[roadtrip]" title="圖片註解文字"><img src="photo2.jpg小圖網址" border="0"></a>  
<a href="photo3.jpg" rel="lightbox[roadtrip]" title="圖片註解文字"><img src="photo3.jpg小圖網址" border="0"></a>

套用結果：