Old

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

声明: 除非注明,ZWWoOoOo文章均为原创,转载请以链接形式标明本文地址
本文地址: http://zww.me/archives/25196

139 comments

  1. winy winy Firefox 3 Firefox 3 Windows 7 Windows 7

    。。。才看见mmmmm写这个

    沙发
  2. 久酷 久酷 Firefox 3 Firefox 3 Windows 7 Windows 7

    大家都在玩这个……

    板凳
  3. Jinwen Jinwen Firefox 3 Firefox 3 Windows Vista Windows Vista

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

    地板
  4. ......
  5. le le Internet Explorer 7 Internet Explorer 7 Windows XP Windows XP

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

    61楼
    • zwwooooo zwwooooo Google Chrome 7 Google Chrome 7 Windows 7 Windows 7

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

    • le le Internet Explorer 7 Internet Explorer 7 Windows XP Windows XP

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

    • zwwooooo zwwooooo Google Chrome 7 Google Chrome 7 Windows 7 Windows 7

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

  6. le le Internet Explorer 7 Internet Explorer 7 Windows XP Windows XP

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

    62楼
  7. 路过 路过 Internet Explorer 6 Internet Explorer 6 Windows XP Windows XP

    我是来看图片的。

    63楼
  8. Fancybox 图片弹出层效果及扩展 / IM路人 - pingback on 2010/12/13/ 20:35
    64楼
  9. asunchou asunchou Firefox 3 Firefox 3 Windows 7 Windows 7

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

    65楼
  10. 行无疆 行无疆 Internet Explorer 9 Internet Explorer 9 Windows 7 Windows 7

    不错

    66楼
  11. 左手跳舞 左手跳舞 Firefox 3 Firefox 3 Windows XP Windows XP

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

    <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>

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

    67楼
  12. 左手跳舞 左手跳舞 Firefox 3 Firefox 3 Windows XP Windows XP

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

    68楼
    • zwwooooo zwwooooo Namoroka 3 Namoroka 3 Windows 7 Windows 7

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

  13. 永腾达 永腾达 Firefox 11 Firefox 11 Windows XP Windows XP

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

    70楼
  14. woo woo Google Chrome 16 Google Chrome 16 Windows XP Windows XP

    下不了啊

    71楼

Leave a Reply