无插件实现 Wordpress Lightbox 特效

首页 » Wordpress研究 » 2009-11-1 »

上一篇日志介绍了让 WordPress 原生相册功能实现基于 jQuery 的 lightbox 特效，技巧是利用了 lightbox 的一个调用方法，依照同样的方法我们也可以让 WordPress 原生的图片功能也能获得 lightbox 特效，也就是说在文章中插入一张图片的情况下也能实现点击放大浏览这种特效。

其原理也很简单，我们在直接利用 WordPress 文章编辑后台插入“上传、相册或媒体里已经存在的图片”：

WP 文章编辑插入图片

之后程序会自动在前台页面代码中插入一个叫做 “wp-caption” 的 class

自动生成 wp-caption 这个class

那么和上一篇方法一样，先去官方网站下载一套 jQuery 的 lightbox plugin ，解压压缩包之后分别在 js 目录和 css 目录下找到如下3个文件：
jquery.js
jquery.lightbox-0.5.min.js
jquery.lightbox-0.5.css
将以上三个文件通过 FTP 上传到你所使用的 wordpress 主题目录下，然后在 <head></head> 标签内插入以下代码即可：

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.js"></script>
<?php if (is_single() or is_page()) { ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.lightbox-0.5.min.js"></script>
<script type="text/css" src="<?php bloginfo('template_directory'); ?>/jquery.lightbox-0.5.css"></script>
<script type="text/javascript">
$(function() {
     $('.gallery a').lightBox(); //给原生相册功能加入 lightbox 特效
     $('.wp-caption a').lightBox(); //给原生图片功能加入 lightbox 特效
});
</script>
<?php } ?>

当然了，由于其中加入了判断，这个效果也只会出现在“文章页”和“页面页”。以上是主题在不支持 jQuery 的时候所添加的代码，如果主题已经加载了 jQuery 库，则需要酌情增加相关的代码了。

总结一下，基于 jQuery 的 lightbox ，我们无需任何其它 WordPress 的插件，就可以让 WordPress 原生的图片功能和相册功能都具有 lightbox 图片点击放大的特效。而且这个是基于 jQuery 库的一种扩展，因而我们可以在主题里方便的同时应用多种 jQuery 特效～比如 D&Z Theme Pro CP 主题侧栏 TAB 栏的切换效果、整站的锚点滚动和文章栏侧栏“MyConverse – 每个人都应该有一双匡威”栏目下的图片效果。

最后上几张实例展示：