调用 WP 的 Thickbox 实现 Lightbox 效果

zhangleifly 发表于 HTML知识, wordpress 分类,标签: , ,
0

(原文链接:http://xuyiyang.com/2008/08/11/using-thickbox-in-wordpress-themes/)

Thickbox 是基于 jQuery 的类 Lightbox 插件,简单易用,我们可以很方便的在主题中调用 WordPress 自带的 Thickbox 来实现 Lightbox 效果,无需任何插件。方法很简单,在 header.php 的 <?php wp_head(); ?> 之前,添加下列代码:

<script type=”text/javascript” language=”javascript” src=”/wp-includes/js/thickbox/thickbox.js”></script>

<script type=”text/javascript” language=”javascript” src=”/wp-includes/js/jquery/jquery.js”></script>

(或:

<?php wp_enqueue_script(‘jquery’); ?>
<?php wp_enqueue_script(‘thickbox’); ?>

【区别见另篇日志】)
<link rel=”stylesheet” href=”/wp-includes/js/thickbox/thickbox.css” type=”text/css” media=”screen” />

(原文为:

<?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” 而已。

如果遇到关闭按钮无法显示的情况,可以将 /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>

« 上一篇: :下一篇 »

发表我的评论

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif