Thickbox, 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>
Read more...