好吧，文章开头我就先承认：我这折腾有点蛋疼。
其实低调高手 willin 已经写过《發揮 WP 內置的 Thickbox 功能》来实现 ThickBox 的图片展示效果，但是 WP 升至 2.9 以后，ThickBox 做了修改，thickbox.js 增加了 "thickboxL10n" 变量, 找不到這变量 thickbox 就失效了。修正方法就是采用 WP 挂 script 的标准方式, 也就是 willin 所写的第一种方法, 用 add_thickbox() 挂上就可解決。
用 add_thickbox() 挂上 ThickBox 的 js 会同时挂上 jQuery 库，而我喜欢用压缩过的 jQuery 库，所以我前段时间停止这个方法了，转而用 A-Shun 在《为博客图片添加 Shadowbox 效果》介绍的 Shadowbox 图片效果
Shadowbox 其实效果挺不错，今天热的蛋疼突然嫌 Shadowbox 太大，js、css、图片加起来有 47.6 K，我还是喜欢 ThickBox 的小巧。
于是今天想想，何不自己直接挂上 ThickBox ？不用 WP 自带的？于是来到 ThickBox 的官网下载最新的 ThickBox 3.1 并折腾好了。
ThickBox 效果（点击下图）：
先来个美女
再来个，嘿嘿
ThickBox 很小巧，js + css + 图片才 15K，下面是方法和我打包好的 ThickBox
1. 下载我打包好的 ThickBox 3.1 ，把压缩包解压到所使用的主题目录下，下载地址：uushare (2010.7.17 Update）
2. 确保你主题已经加载 jQuery 库，如果没有加载，打开主题文件 header.php 把下面的加载代码加到<?php wp_head(); ?> 前面。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
3. 把下面的加载代码加到 <?php wp_head(); ?> 下面
<?php if ( is_singular() ){ /* 只在单个页面加载 */ ?> <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/thickbox/thickbox.css"> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/thickbox/thickbox-compressed.js"></script> <?php } ?>
4. 使用方法
单图放大
<a class="thickbox" href="http://...(大图)..."><img src="http://...(缩图)..." /></a>
多图相册
<a class="thickbox" rel="group1" href="http://...(第1张大图)..."><img src="http://...(第1张缩图)..." /></a>
<a class="thickbox" rel="group1" href="http://...(第2张大图)..."><img src="http://...(第2张缩图)..." /></a>
<a class="thickbox" rel="group1" href="http://...(第3张大图)..."><img src="http://...(第3张缩图)..." /></a>
如果你想偷懒，那么用 willin 的留一手：用 jQuery 为每张图片链接自动加上
/* 用 jQuery 为每张图片链接自动加上 class="thickbox" */ $('#content p a').each(function(){ //根据主题内容区的 id 设置选择器 var a_href = $(this).attr('href').toLowerCase(); var file_type = a_href.substring(a_href.lastIndexOf('.')); if (file_type == '.jpg' || file_type == '.png' || file_type == '.gif'){$(this).addClass('thickbox')}; });
OK，搞定，简单，蛋疼
2010.7.17 Update
竟然不显示 loading 图片，看了下 js 代码，图片竟然不能用相对路径，囧～
解决方法
第一种：用绝对路径吧（废话）
打开 thickbox-compressed.js 把
var tb_pathToImage = "images/loadingAnimation.gif";
中的 images/loadingAnimation.gif 改为图片 loadingAnimation.gif 的绝对路径
第二种：如果你的wp安装在根目录下，那么重新下载压缩包吧（就是使用 wp-includes/js/thickbox/loadingAnimation.gif 这个图片）
囧～
声明: 除非注明，ZWWoOoOo文章均为原创，转载请以链接形式标明本文地址
本文地址: http://zww.me/archives/25196
博客图片不用任何效果的飘过。。
@QiQBoY 哈哈，你那图片都不会太大
这效果不错啊
@BoKeam 简单的效果
哇塞，流血~~~
哈，学习一下～听说willin大师要退隐了？
@球犯 说回台湾暂时不折腾了，可惜啊
不断点击第二张图片无数次。。。。
其实是为了感受一下thickbox效果
@zchiy2k 嗯嗯，我明白
第二个好大啊
@章鱼 所以图片也比较大
@zwwooooo
我怎么没收到回复的邮件呢？
@章鱼 不会吧，再试试
这图啊，这图啊，我就不说啥了
@LAONB 大家心里明白就可以了
我是来看美女的 哈哈
@阿邙 正常，荒淫
我发现浏览者中这么多用火狐的
@zzzhu 一般会改变的用户都是选ff多
嘿嘿,,我最喜欢点美女了~~~
@TTkea 早知道换为广告多好啊
呵呵，不错不错的，那这个方法是不是每次都得手动指定大图和小图的呢？
@fly3q 你写文章时要给图片加链接，链接是图片即可。
跟auto-highslide效果比，哪个更好些？
@Qiankun highslide好点，但highslide大
不错的功能，准备移植到俺blog上
@Timothy 这个功能blog还是需要的
这次我只看美女~
@mcooo 哈哈，大部分是来看美女的
第二张也太
@淘宝网女装 太大？太诱惑？
美女真好看
漂亮
捧个场！~~~
东西好，美女更好。