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. dengmin says:

    波霸啊

  2. Jasoon says:

    第二个!!!

  3. 阿飞 says:

    第一个果然标致!

    1. zwwooooo says:

      @阿飞 都是来看美女的,哈

  4. 7cbt says:

    我看到很多人 博文看头有这个图片 我还去刷了很多次呢 原来就是这个么

    1. zwwooooo says:

      @7cbt 对,那些文章没图片的就随机显示美女图

  5. 羽中 says:

    不错,轻快型的,虽然我还是更喜欢highslide的豪华感

    1. zwwooooo says:

      @羽中 我喜欢简单的

  6. 昆明论坛 says:

    这个效果很不错啊,很漂亮

    1. zwwooooo says:

      @昆明论坛 其实这个效果不是很漂亮,只是简单小巧。

  7. 小邪 says:

    第二个三维MM真不错 (¯﹃¯)

    1. zwwooooo says:

      @小邪 是啊,特意拿来诱惑各位

  8. Dianso says:

    图片很好 :twisted:

    1. zwwooooo says:

      @Dianso 哈哈,的确是

  9. 不错,不过lightbox也很华丽~

    1. zwwooooo says:

      @perfectgeorge 华丽的很多,但我喜欢简单小巧

    2. test says:

      @zwwooooo
      lightbox也好

  10. 我是看美女来的 :razz:

    1. zwwooooo says:

      @丰胸产品排行榜 要是你以个人来看就好了,不要丰胸

  11. 好像不行啊,没看到效果。

    1. zwwooooo says:

      @代码如歌 刚好在改主题,现在可以了

  12. Carrie says:

    啊~就是一直在找這樣簡單小巧不耗費資源的效果呢!真是太棒的分享了 :lol:

    1. zwwooooo says:

      @Carrie 欢迎折腾

    2. Carrie says:

      @zwwooooo 我發現我加上了最後那段 jQuery 還是沒法幫圖片自動加上 ThickBox 的效果呢!是我哪裏設錯了嗎?

    3. zwwooooo says:

      @Carrie 看看你的主题设置选择id

    4. zwwooooo says:

      @Carrie 看来下你的主题,你应该把
      $('#content p a')
      改为
      $('.entry-content p a')

    5. Carrie says:

      @zwwooooo 我的確是把那段改成 .entry-content 了,但是還是沒有效果。

      補充說明,我是把那段代碼直接放在 header.php 的 ThickBox 代碼之後,用了 <script type="text/javascript">...</script> (代碼尖角我換成全型的,怕代碼出不來 :razz: )包起來,還是說這段 jQuery 代碼用另外存放用 include 的方式插入呢?

    6. zwwooooo says:

      @Carrie 应该是jq代码不起作用,可能是你写错了

    7. zwwooooo says:

      @Carrie 又看了下你的网站,前面几篇文章都没有图片在 p 下,所以你改为这样吧
      .entry-content a

      因为我看你的图片是用div包起来的。

    8. Carrie says:

      @zwwooooo 好的,我試試去~謝謝 :lol:

      試了,不過還是不起作用,鬱悶 :!:

      這篇文章裏的圖片的確是有加上 p 的值,沒有用 div 包起來,不過還是不起效果,暫時不折騰他了 :arrow:

  13. xux says:

    和那个Disable autosave有什么区别? :sad:

    1. zwwooooo says:

      @xux 你说的是啥?

  14. Bee君 says:

    我用的是jQuery精简版..js才3k不过没动画效果,但功能不错

    1. zwwooooo says:

      @Bee君 其实自己也可以写,当然没这么好效果和兼容性

  15. 最近怎么都再折腾图片插件??

  16. biao166 says:

    报告,搜狗没效果,直接跳转到图片

    1. zwwooooo says:

      @biao166 搜狗啊,不理它,不就是ie么

  17. [...] 一直都想实现的效果,以前试用了很多这方面的插件,虽然效果实现了,但是毛病太多,最终还是不得不放弃,最近在浏览ZWW发布的一篇日志简单实现图片的ThickBox 效果的日志中找到了一个非常方便的wordpress自带功能实现这类功能的东西,迫不及待在博客更新上了。来看看效果! [...]

  18. jalena says:

    貌似1.42的jquery的库加载了没用。。。

    我把1.32的库直接换上了1.42的,就没效果了!!! :???:

    1. zwwooooo says:

      @jalena 1.42太高级了,没试过,也许吧,看看Thickbox官方网站吧

    2. jalena says:

      @zwwooooo 我纠结了!! :arrow:

    3. jalena says:

      zwwooooo:@jalena 1.42太高级了,没试过,也许吧,看看Thickbox官方网站吧

      @zwwooooo

      呵呵,1.42的库没问题,只有我的主题好像更改了一些东西,rel参数不能用,使用了就一直出现加载条,就是不出来东西。

    4. zwwooooo says:

      @jalena 哈哈,按道理thickbox是支持最新的jq库的。

  19. 狼图腾 » 测试同步WP到QZONE says:

    [...] Highslide,使用WP內置的Thickbox功能!具体办法见ZWWoOoO的《简单实现图片的 ThickBox 效果》! Author: erick Categories: 技能|Skill Tags: Blog, iNove, 主题, 博客, [...]

  20. jalena says:

    我悲剧了,主题加上之后就提示有错误!

回复给 woo ¬
取消回复

昵称 *

网址

B em del U Link Code Quote