調用 Flexible Lightbox

Lightbox 俗稱燈箱，為 AJAX 的一種效果。
Lightbox 的效果類似於 WinXP 操作系統的 註銷/關機對話框，
除去螢幕中心位置的對話框，
其他的區域都以淡出的效果逐漸變為銀灰色以增加對比度，
此時除了對話框內的表單控件，沒有其他區域可以獲取焦點。

在 WordPress 上有很多 Lightbox 的 Plugins 應用，
這裡介紹一個簡單一用的叫 Flexible Lightbox，
透過在 tag a 加入 class="lightbox" 調用，
如果一個頁面有很多個 class="lightbox" ，
則可在彈出的圖片中顯示 上一張/下一張，
並在圖片下面顯示 目前張數/全部張數，
tag a 的 title 則為彈出圖片下面所顯示的說明文字。

資料夾裡的 css 及 images 隨個人喜好修改，
js 裡留 jquery.lightbox-0.5.pack.js 及 lightbox_call.js 即可。

以下是一個範例：
[xml]<a class="lightbox" href="http://web-argument.com/wp-content/uploads/2009/02/milan-199.jpg" title="圖1"><img src="http://web-argument.com/wp-content/uploads/2009/02/milan-199-150x150.jpg" title="點擊放大" alt="圖1"/></a><br/>
<a class="lightbox" href="http://web-argument.com/wp-content/uploads/2009/03/milan-1.jpg" title="圖2"><img src="http://web-argument.com/wp-content/uploads/2009/03/milan-1-150x150.jpg" title="點擊放大" alt="圖2"/></a><br/>
<a class="lightbox" href="http://web-argument.com/wp-content/uploads/2009/02/addmedia.jpg" title="圖3"><img src="http://web-argument.com/wp-content/uploads/2009/02/addmedia-150x150.jpg" title="點擊放大" alt="圖3"/></a><br/>
<a class="lightbox" href="http://web-argument.com/wp-content/uploads/2009/02/show.jpg" title="圖4"><img src="http://web-argument.com/wp-content/uploads/2009/02/show-150x150.jpg" title="點擊放大" alt="圖4"/></a><br/>
<a class="lightbox" href="http://web-argument.com/wp-content/uploads/2009/02/using.jpg" title="圖5"><img src="http://web-argument.com/wp-content/uploads/2009/02/using-150x150.jpg" title="點擊放大" alt="圖5"/></a><br/>
<a class="lightbox" href="http://web-argument.com/wp-content/uploads/2009/02/tag.jpg" title="圖6"><img src="http://web-argument.com/wp-content/uploads/2009/02/tag-150x150.jpg" title="點擊放大" alt="圖6"/></a>[/xml]

XHTML 輸出結果：