简单实现图片的 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. le says:

    jQuery 怎么用啊?我搞不清楚加到哪个文件上。能不能详细的说说。呵呵。谢谢。淡定的说,美女不错。 :lol: :lol:

    1. zwwooooo says:

      @le 文章步骤已经说的够详细了

    2. le says:

      @zwwooooo
      我在Jquery.JS加上了,但是怎么没有效果啊。

    3. zwwooooo says:

      @le 注意先后顺序,先安装文中方法折腾好了,再自己整合js

  2. le says:

    网上还有一篇文章,是修改了media.PHP文件后自动加上了class,应该可以借鉴,3.1后的wordpress有超链接的描述。你有时间研究下啊。呵呵

    1. zwwooooo says:

      @le 不需要研究,这个就ok了

  3. 路过 says:

    我是来看图片的。

  4. [...] 1z2w5o 的网站上看到了他所提到的 ThickBox 效果(Willin 折腾版),然后顺着他给的链接“ThickBox [...]

  5. asunchou says:

    不知什么原因,willin的博客最近上不了,估计是他的免费空间遭受了GFW的袭击

    1. zwwooooo says:

      @asunchou
      我这可以啊

  6. 行无疆 says:

    不错

  7. 左手跳舞 says:

    为什么我可以用单图,却不能用多图相册!

    <a href="http://localhost/star/images/plant2.jpg"  class="thickbox" ><img src="http://localhost/star/images/plant2_t.jpg" alt="Plant 2" /></a> 
    <a href="http://localhost/star/images/plant3.jpg"  class="thickbox" rel="group"><img src="http://localhost/star/images/plant3_t.jpg" alt="Plant 3" /></a> 
    <a href="http://localhost/star/images/plant4.jpg"  class="thickbox" rel="group"><img src="http://localhost/star/images/plant4_t.jpg" alt="Plant 4" /></a>

    点出来一只是加载的动作!

  8. 左手跳舞 says:

    跪求加QQ849729175截图给你看,我已经搞了好几天了!太太太纠结!谢谢!

    1. zwwooooo says:

      @左手跳舞
      直接参考ThickBox官方网站的安装说明。另外,别动不动就跪求,这个口头习惯不好。本人较忙,很少接免费修改服务,如果觉得手动太麻烦就考虑用插件吧。

  9. [...] 內置的 Thickbox 功能、zwwooooo大大的简单实现图片的 ThickBox 效果、a-shun大大的为博客图片添加 Shadowbox [...]

  10. 永腾达 says:

    无法自动为图片链接加上class="thickbox" ,在文章中手动为图片加上就有效果!

    1. zwwooooo says:

      @永腾达
      检查jQuery代码有没有冲突。

  11. woo says:

    下不了啊

    1. zwwooooo says:

      @woo
      uushare网盘倒闭了,所以去ThickBox官方下载吧: http://jquery.com/demo/thickbox/

发表评论

昵称 *

网址

B em del U Link Code Quote