2010年07月16日 139条评论

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

    博客图片不用任何效果的飘过。。 :eek:

    1. zwwooooo says:

      @QiQBoY 哈哈,你那图片都不会太大

  2. BoKeam says:

    这效果不错啊

    1. zwwooooo says:

      @BoKeam 简单的效果

  3. 哇塞,流血~~~

  4. :smile: 呵呵,改天弄过去玩玩

  5. 球犯 says:

    哈,学习一下~听说willin大师要退隐了?

    1. zwwooooo says:

      @球犯 说回台湾暂时不折腾了,可惜啊

  6. zchiy2k says:

    不断点击第二张图片无数次。。。。
    其实是为了感受一下thickbox效果 :lol:

    1. zwwooooo says:

      @zchiy2k 嗯嗯,我明白 :grin:

  7. 章鱼 says:

    第二个好大啊

    1. zwwooooo says:

      @章鱼 所以图片也比较大 :grin:

    2. 章鱼 says:

      @zwwooooo
      我怎么没收到回复的邮件呢? :!:

    3. zwwooooo says:

      @章鱼 不会吧,再试试

  8. LAONB says:

    这图啊,这图啊,我就不说啥了 :mrgreen:

    1. zwwooooo says:

      @LAONB 大家心里明白就可以了 :grin:

  9. 阿邙 says:

    我是来看美女的 哈哈 :lol:

    1. zwwooooo says:

      @阿邙 正常,荒淫

  10. zzzhu says:

    我发现浏览者中这么多用火狐的

    1. zwwooooo says:

      @zzzhu 一般会改变的用户都是选ff多

  11. TTkea says:

    嘿嘿,,我最喜欢点美女了~~~

    1. zwwooooo says:

      @TTkea 早知道换为广告多好啊 :grin:

  12. fly3q says:

    呵呵,不错不错的,那这个方法是不是每次都得手动指定大图和小图的呢?

    1. zwwooooo says:

      @fly3q 你写文章时要给图片加链接,链接是图片即可。

  13. Qiankun says:

    跟auto-highslide效果比,哪个更好些?

    1. zwwooooo says:

      @Qiankun highslide好点,但highslide大

  14. Timothy says:

    不错的功能,准备移植到俺blog上

    1. zwwooooo says:

      @Timothy 这个功能blog还是需要的

  15. mcooo says:

    这次我只看美女~ :grin:

    1. zwwooooo says:

      @mcooo 哈哈,大部分是来看美女的

  16. 淘宝网女装 says:

    第二张也太 :oops:

    1. zwwooooo says:

      @淘宝网女装 太大?太诱惑? :grin:

  17. 竹纤维 says:

    漂亮

  18. 捧个场!~~~

  19. 雷朋 says:

    东西好,美女更好。

回复给 Timothy ¬
取消回复

昵称 *

网址

B em del U Link Code Quote