且听冯吟

除图片外全文转自：http://xuyiyang.com/2008/08/11/using-thickbox-in-wordpress-themes/

Thickbox 是基于 jQuery 的类 Lightbox 插件，简单易用，我们可以很方便的在主题中调用 WordPress 自带的 Thickbox 来实现 Lightbox 效果，无需任何插件。

方法很简单，在 header.php 的 <?php wp_head(); ?> 之前，添加下列代码：

<?php wp_enqueue_script(’jquery’); ?>
<link rel=”stylesheet” href=”/wp-includes/js/thickbox/thickbox.css” type=”text/css” media=”screen” />

然后你就可以利用下面的代码为图片或其他内容添加 Lightbox 效果（效果如图）：

代码为：

<a href=”图片URL” title=”标题” class=”thickbox”><img src=”缩略图URL” alt=”” /></a>

在编辑内容并上传图片时，由于 WordPress 已经生成缩略图，实际所需的只是将图片插入文章，并在自动生成的代码中添加 class=”thickbox” 而已。【此处，若不想每次都手动添加class=”thickbox”，可编辑\wp-admin\includes\media.php文件，找到$html = ‘<a href=”‘ . clean_url($url) . “>$html</a>”;加入class=”thickbox”成为这样：$html = ‘<a class=”thickbox” href=”‘ . clean_url($url) . “>$html</a>”;即可。——博主注】

如果遇到关闭按钮无法显示的情况，可以将 /wp-includes/js/thickbox/thickbox.js 这一文件中的头两行代码：

var tb_pathToImage = “../wp-includes/js/thickbox/loadingAnimation.gif”;
var tb_closeImage = “../wp-includes/js/thickbox/tb-close.png”;

中的 “..” 改为绝对路径。

或者在 <?php wp_head(); ?> 之后，</head> 之前加入下述代码：

<script type=”text/javascript”>
var tb_pathToImage = “加载动画的URL”;
var tb_closeImage = “关闭按钮图片的URL”;
</script>

Related posts

• 黑客们在利用wordpress主题吗？from译言 (2)
• 郁闷 (12)
• 解决WordPress中文标签问题 (6)
• 清晨的惊喜~ (2)
• 来个好玩的 (0)