比較 Thickbox, LightBux, Auto HighSlide, and WP-Slimbox2
Author: Eric // Category: Free TeachingThickbox, LightBox, Auto HighSlide, WP-Slimbox2 這四個都可以讓圖片有光箱的特效, 其中 Auto HighSlide, WP-Slimbox2 是 WordPress Plugin。
下面是 Thickbox, LightBox, Auto HighSlide, WP-Slimbox2 的用法和比較
01. Thickbox 不用再自己上傳, 因為 WordPress 就有內附了。但如果原圖太大, 點擊不會還原到最大, 而是有一固定大小, 而且用 IE8 測試好像有問題, 愛搞怪的 IE6 這次卻很乖。
a. WP 用的是沒壓縮 /wp-includes/js/jquery/jquery.js
b. WP 用的是壓縮過 /wp-includes/js/thickbox/thickbox.js
c. WP 用的是沒壓縮 /wp-includes/js/thickbox/thickbox.css
用法 : 在您要使用的主題 Theme 的 header.php 找到 之前, 添加下面的code
<!-- For ThickBox Usage -->
<script type="text/javascript" src="./wp-includes/js/jquery/jquery.js"></script>
<script type="text/javascript" src="./wp-includes/js/thickbox/thickbox.js"></script>
<?php wp_enqueue_script('jquery'); ?>
<link rel="stylesheet" href="./wp-includes/js/thickbox/thickbox.css" type="text/css" media="screen"/>
<!-- For ThickBox Usage -->
如果您的 Thickbox 是上傳在其它地方, 不是用WP內建的, 就要用絕對路徑, 否則用上面的相對路徑即可。
<!-- For ThickBox Usage -->
<script type="text/javascript" src="http://who-know.com/wp-includes/js/jquery/jquery.js"></script>
<script type="text/javascript" src="http://who-know.com/wp-includes/js/thickbox/thickbox.js"></script>
<?php wp_enqueue_script('jquery'); ?>
<link rel="stylesheet" href="http://who-know.com/wp-includes/js/thickbox/thickbox.css" type="text/css" media="screen"/>
<!-- For ThickBox Usage -->
插入單張圖片：
<a class="thickbox" title="標題" href="原圖URL"><img src="縮圖URL" alt="" /></a>
插入連續圖片： // 有 Prev、Next 的效果
<a class="thickbox" title="標題1" rel="photo" href="原圖1URL"><img src="縮圖1URL" alt="" /></a> <a class="thickbox" title="標題2" rel="photo" href="原圖2URL"><img src="縮圖2URL" alt="" /></a> <a class="thickbox" title="標題3" rel="photo" href="原圖3URL"><img src="縮圖3URL" alt="" /></a>
02. LightBox 沒什麼問題, 就是肥胖了點
用法 : 在您要使用的主題 Theme 的 header.php 找到 之前, 添加下面的 code。
<!-- For 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" /> <!-- For lightbox -->
如果您的 LightBox 是上傳在其它地方, 就要用絕對路徑, 否則用上面的相對路徑即可。
<!-- For lightbox --> <script type="text/javascript" src="http://who-know.com/lightbox/js/prototype.js"></script> <script type="text/javascript" src="http://who-know.com/lightbox/js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="http://who-know.com/lightbox/js/lightbox.js"></script> <link rel="stylesheet" href="./lightbox/css/lightbox.css" type="text/css" media="screen" /> <!-- For lightbox -->
插入單張圖片：
<a href="原圖URL" rel="lightbox" title="標題"><img src="縮圖URL" alt="" /></a>
插入連續圖片： // 有 Prev、Next 的效果
<a href="原圖1URL" rel="lightbox[roadtrip]" title="標題"><img src="縮圖1URL" alt="" /></a> <a href="原圖2URL" rel="lightbox[roadtrip]" title="標題"><img src="縮圖2URL" alt="" /></a> <a href="原圖3URL" rel="lightbox[roadtrip]" title="標題"><img src="縮圖3URL" alt="" /></a>
03. Auto HighSlide v.s. WP-Slimbox2
不同於上面兩個, Auto HighSlide, WP-Slimbox2 是 WordPress Plugin, 它們可以自動找到文章中的"圖片", 讓圖片自動有特效, 您不用加任何的 code, 很方便吧。
以下是兩個插件的異同
a. Auto HighSlide、WP-Slimbox2 都是小硬碟福音, 這樣說好像怪怪的。兩個 Plugin 都很小, 初看 WP-Slimbox2 肥肥的, 那是因為它有 language pack。
b. Auto HighSlide 如果原圖真的很大張, 它會變成兩段式放大。點擊圖片放大以後, 再按右下角有個向四面八方的圖才會顯示真的的原圖。
c. Auto HighSlide 點擊圖片放大以後, 可以用左鍵拖移圖片。
d. 同一篇文章的圖片 WP-Slimbox2 會自動把它變成有 Prev、Next 的效果
// 前提是有大於1張的圖片
e. 如果圖片是上傳在 Picasa or Flickr 可以試試 WP-Slimbox2, 它好像可以辨識出這兩個空間的圖片。
// WP-Slimbox2 下載啟用後, WordPress 後台有可以設定, 啟用 Autoload 後就不用自己加code。
用法 : 就跟平常插入圖片一樣。
<a href="原圖URL"><img src="縮圖URL" alt="" /></a>
To sum up, 如果您剛開始用 WordPress 或還沒有有很多圖片的文章或不想用插件, 那用 Thickbox or LightBox 都是不錯的選擇。如果已經有很多文章了, 不想在特地去修改文章, 那 Auto HighSlide or WP-Slimbox2 會是您更好的選擇。
// 提醒：Thickbox 本身會把太大的圖片自動縮成它內定的大小, 所以不適合用來展示大型的圖片。
ps:
a. Thickbox or LightBox 除了可以用在 WP 秀圖外, 也可以用在其它地方, 只要在<head></head>間插入上面的code。除了
<?php wp_enqueue_script('jquery'); ?>b. 如果用了Thickbox or LightBox 但是小圖片 (eg: 關閉、放大鏡) 沒顯示出來檢查一下您的 thickbox.js and thickbox.css or lightbox.js and lightbox.css
其它幾個相似的 WordPress Plugin : Lightbox Plus, jQuery Lightbox, Auto Thickbox
Tags: Auto HighSlide, jQuery, LightBux, Thickbox, WordPress Plugin, WP-Slimbox2
November 4th, 2009 at 11:24 PM
很强 谢谢 哈哈 你这个做加法的插件也给我吧 ~
November 4th, 2009 at 11:27 PM
和留言的ajax有冲突么？
November 4th, 2009 at 11:27 PM
我加你吧 请教点事 msn 可以吗 ？
November 7th, 2009 at 3:02 PM
用簡單數學題目防止垃圾留言(Math Comment Spam Protection Plugin)
我有裝 WP Ajax Edit Comments, 所以應該是不會和 Ajax 相衝