image

lightbox2 效果

之前站內所用的lightbox燈箱如上圖，在這篇有介紹到 lightbox 的使用與心得介紹。

而這次想把 lightbox2 換掉，本身的確效果讓人滿意，個人也蠻推薦使用的。

因為他其實設定使用上很簡單，基本上第一次看到他的人都一定會喜歡上這樣展現圖片

的效果，但是如果你使用一段時間，總會想能少點外掛插件（plugin），對wp執行速度

上能有一定增加幫助，像我就是有這樣的想法，當然多少也有點看膩了lightbox2 的效

果，想換換口味可以嘗試看看。

於是乎我在 wordpress 主程式內的資料夾(\wp-includes\js\thickbox)看到了 thickbox

先看一下他的效果展示：
thickbox

如果跟上面展示圖內的方式比起來，其實效果大同小異，不過內容就差很多了。

thickbox 在主程式內的資料夾內容大小只有27.5KB(含圖檔)。

lightbox2 整個插件需要75.9KB，相較之下檔案較大，對於速度方面當然多少也會有一定影響吧！

thickbox 主要是由 jQuery 所發展出來的一套類似lightbox的特效，想當然檔案小是必然的，再來是因為他原來就內建在 wordpress 裡面，這才是讓我想換掉lightbox的
主要原因。

如何使用 wordpress 內建的 thickbox?


由於本身 wordpress 就內建了 thickbox，所以只要在你要使用的主題(theme)

修改 header.php 並在 <?php wp_head(); ?> 之前，添加下列代码：

<?php wp_enqueue_script('jquery'); ?>
<link rel="stylesheet" href="/wp-includes/js/thickbox/thickbox.css" type="text/css" media="screen" />

修改 header.php 引入 jquery.js 與 thickbox.js 兩個檔案，把兩個檔案加入在<head></head>之間，如下：

<!--– 調用thickbox –-->
<script src="/wp-includes/js/jquery/jquery.js" type="text/javascript"></script>
 
<script src="/wp-includes/js/thickbox/thickbox.js" type="text/javascript"></script>

要插入單張圖片顯示 thickbox 效果的代碼：

<a class="thickbox" title="標題" href="原始大圖URL"><img src="縮略圖URL" alt="" /></a>

如果需要連續插入圖片讓他有上一頁下一頁的效果代碼：

<a class="thickbox" title="標題" rel="photo" href="原始大圖1URL"><img src="縮略圖1URL" alt="" /></a>
 
<a class="thickbox" title="標題" rel="photo" href="原始大圖2URL"><img src="縮略圖2URL" alt="" /></a>
 
<a class="thickbox" title="標題" rel="photo" href="原始大圖3URL"><img src="縮略圖3URL" alt="" /></a>

(注意：rel="photo"中的photo類似相簿的名稱一樣，隨便設定都可以。)

效果如下：

同時 thickbox 還可以拿來顯示網頁，這是另一個我蠻喜歡的功能，代碼如下：

<a title="標題" href="網頁網址?keepThis=true&amp;"> 連結的文字 </a>


效果如下：
我的部落格

基本上不需要安裝的步驟，只是引入兩個js檔，加入一段代碼就可以用thickbox了

不過thickbox基本上我建議拿來展示一些小型的圖檔，因為他本身會把太大的圖檔自動
縮成他自己內定的大小。

參考資料：

OECSPACE 的 THICKBOX 3.1