简单实现图片的 ThickBox 效果
好吧，文章开头我就先承认：我这折腾有点蛋疼。
其实低调高手 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 这个图片）
囧～
声明: 本文采用 BY-NC-SA 协议进行授权 | ZWWoOoOo
转载请注明转自《简单实现图片的 ThickBox 效果》
呵呵，不错不错的，那这个方法是不是每次都得手动指定大图和小图的呢？
@fly3q 你写文章时要给图片加链接，链接是图片即可。
跟auto-highslide效果比，哪个更好些？
@Qiankun highslide好点，但highslide大
不错的功能，准备移植到俺blog上
@Timothy 这个功能blog还是需要的
这次我只看美女~
@mcooo 哈哈，大部分是来看美女的
第二张也太
@淘宝网女装 太大？太诱惑？
美女真好看
漂亮
捧个场！~~~
东西好，美女更好。
波霸啊
第二个！！！
第一个果然标致！
@阿飞 都是来看美女的，哈
我看到很多人 博文看头有这个图片 我还去刷了很多次呢 原来就是这个么
@7cbt 对，那些文章没图片的就随机显示美女图
不错，轻快型的，虽然我还是更喜欢highslide的豪华感
@羽中 我喜欢简单的
这个效果很不错啊，很漂亮
@昆明论坛 其实这个效果不是很漂亮，只是简单小巧。
第二个三维MM真不错 （¯﹃¯）
@小邪 是啊，特意拿来诱惑各位
图片很好
@Dianso 哈哈，的确是
不错，不过lightbox也很华丽~
@perfectgeorge 华丽的很多，但我喜欢简单小巧
@zwwooooo
lightbox也好
我是看美女来的
@丰胸产品排行榜 要是你以个人来看就好了，不要丰胸
好像不行啊，没看到效果。
@代码如歌 刚好在改主题，现在可以了
啊～就是一直在找這樣簡單小巧不耗費資源的效果呢！真是太棒的分享了
@Carrie 欢迎折腾
@zwwooooo 我發現我加上了最後那段 jQuery 還是沒法幫圖片自動加上 ThickBox 的效果呢！是我哪裏設錯了嗎？
@Carrie 看看你的主题设置选择id
@Carrie 看来下你的主题，你应该把
$('#content p a')
改为
$('.entry-content p a')
@zwwooooo 我的確是把那段改成 .entry-content 了，但是還是沒有效果。
補充說明，我是把那段代碼直接放在 header.php 的 ThickBox 代碼之後，用了 ＜script type="text/javascript"＞...＜/script＞ （代碼尖角我換成全型的，怕代碼出不來
）包起來，還是說這段 jQuery 代碼用另外存放用 include 的方式插入呢？
@Carrie 应该是jq代码不起作用，可能是你写错了
@Carrie 又看了下你的网站，前面几篇文章都没有图片在 p 下，所以你改为这样吧
.entry-content a
因为我看你的图片是用div包起来的。
@zwwooooo 好的，我試試去～謝謝
試了，不過還是不起作用，鬱悶
我這篇文章裏的圖片的確是有加上 p 的值，沒有用 div 包起來，不過還是不起效果，暫時不折騰他了
和那个Disable autosave有什么区别？
@xux 你说的是啥？
我用的是jQuery精简版..js才3k不过没动画效果，但功能不错
@Bee君 其实自己也可以写，当然没这么好效果和兼容性
最近怎么都再折腾图片插件??
@掌柜的马甲 刚好、碰巧
报告，搜狗没效果，直接跳转到图片
@biao166 搜狗啊，不理它，不就是ie么
貌似1.42的jquery的库加载了没用。。。
我把1.32的库直接换上了1.42的，就没效果了！！！
@jalena 1.42太高级了，没试过，也许吧，看看Thickbox官方网站吧
@zwwooooo 我纠结了！！
@zwwooooo
呵呵，1.42的库没问题，只有我的主题好像更改了一些东西，rel参数不能用，使用了就一直出现加载条，就是不出来东西。
@jalena 哈哈，按道理thickbox是支持最新的jq库的。
我悲剧了,主题加上之后就提示有错误!
jQuery 怎么用啊？我搞不清楚加到哪个文件上。能不能详细的说说。呵呵。谢谢。淡定的说，美女不错。
@le 文章步骤已经说的够详细了
网上还有一篇文章，是修改了media.PHP文件后自动加上了class，应该可以借鉴，3.1后的wordpress有超链接的描述。你有时间研究下啊。呵呵
@le 不需要研究，这个就ok了