简单实现图片的 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 这个图片)

囧~

zww
or
oooo

“简单实现图片的 ThickBox 效果”有139条评论

  1. winy says:

    。。。才看见mmmmm写这个

    1. zwwooooo says:

      @winy mmmm写的是lightbox

    2. winy says:

      @zwwooooo 为占sf看得太快了 :mrgreen: 我用的也是lightbox

  2. 久酷 says:

    大家都在玩这个……

    1. zwwooooo says:

      @久酷 我是喜欢用简单的,刚好很多木在写这个系列

  3. Jinwen says:

    美女好喜欢。我一直也想转TB,但我曾经试过,发现不能通过HTML的检验,所以我也罢了。

    1. zwwooooo says:

      @Jinwen 哈哈,Jinwen的洁癖

  4. A.shun says:

    ThickBox的体积的确是很让人口水的,就是效果木有淡出淡入。
    Lightbox对滚屏的支持就差了- -

    哪天shadowbox看腻了就换这个。

    1. zwwooooo says:

      @A.shun 我是只要能放大即可,没过多效果要求

  5. A.shun says:

    哼。。。这两张美女图片。。。om重口味啊

    1. zwwooooo says:

      @A.shun 嘿嘿,你不喜欢啊

  6. ifenwen says:

    都在搞这个啊 等图片多了折腾看看

    1. zwwooooo says:

      @ifenwen 有时大图需要这个

  7. iuuan says:

    咳咳。。。上班时间观看。。。同事说你在看啥啊!。。。 小解释下~
    晕~下次换张口味淡点的~~
    下班了折腾下这个效果试试看。呵呵 :lol:

    1. zwwooooo says:

      @iuuan 这……还好吧,哈

  8. 阿修 says:

    口味太重,表示抗议…… :evil: :evil:

    1. zwwooooo says:

      @阿修 你心里可不是这样想的 :grin:

  9. [...] This post was mentioned on Twitter by A.shun and zwwooooo, zwwooooo. zwwooooo said: 『最新博文』简单实现图片的 ThickBox 效果 http://zww.me/archives/25196 [...]

  10. 这篇文章写的非常棒 先收藏了 谢谢博主~~~

  11. 蛋卷 says:

    学习了 :grin:

  12. 集趣 says:

    不知道为什么 ,你的评论列表,在IE6下会一直闪动哦

    1. zwwooooo says:

      @集趣 fixed属性问题,我懒得让ie6支持

  13. zrqx008 says:

    第二张图片有些蛋疼

    1. zwwooooo says:

      @zrqx008 这两张图反常大吧,哈

  14. 万戈 says:

    HIAHIA,只看图!!!

    1. zwwooooo says:

      @万戈 还是你真爽

  15. 猪八戒 says:

    这个叫tickbox呀?我发现了有各种各样的box.

  16. max says:

    好吧,我承认我是冲着这两张图来的... :lol:

    1. zwwooooo says:

      @max 嗯嗯,说出了大家的心声

  17. 俺是来看MM滴

  18. 爱月 says:

    内置的啊?~比插件速度快么?~

    1. zwwooooo says:

      @爱月 WP内置ThickBox,不过快慢看js大小吧

  19. zvv says:

    :twisted: 看到有美女 就进来了

    1. zwwooooo says:

      @zvv 这次没骗你了,哈

  20. mice says:

    我还是喜欢我用的那个,忘记叫什么了..
    好处就是假如js没有加载完毕 点图片不会直接链接到图片去..还是在当前页面.. :mrgreen:
    不知道解释的清楚不清楚..

    晚上去看看 我那个效果的体积 还能不能缩小.

    1. zwwooooo says:

      @mice 哦,自己用着感觉好即可

发表评论

昵称 *

网址

B em del U Link Code Quote