好吧，文章开头我就先承认：我这折腾有点蛋疼。

其实低调高手 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 这个图片）

囧～

• 本文标题：简单实现图片的 ThickBox 效果
• 本文链接：https://zww.me/archives/25196
• 发布时间：2010年07月16日 10:18
• 版权声明：除非注明，文章均为 zwwooooo 原创，转载请以链接形式标明本文地址！