網生@誌 | zEUS.'Blog

首页 » Wordpress研究 » 2009-10-31 »

无插件让 WordPress 原生相册支持 lightbox

字体大小:T | T

不提倡使用过多的 WordPress 插件,因为很多插件都会在 head 标签内增加大量的 JS,无疑这会影响到页面载入的速度,因而我就想能整合到主题里的效果尽量整合进来“统一管理”,这样自己也好让 JS 出现在它们需要的地方,避免不必要的加载。这里简单介绍一下给主题加入 jQuery 的 lightbox 特效后如何让它能够支持 WordPress 原生的图片相册功能。

我在上一篇日志里第一次使用了 WordPress 原生相册功能,给我感觉挺不错的——方便快捷,但是它的图片链接会重新打开图片,这着实不是很爽。另外,由于 D&Z Theme Pro CP 主题已经内嵌了 jQuery 的 lightbox 特效,于是我就想能否将两者结合起来,不试不知道,一试还真成功了 😀 而且还只是仅仅只是在 header.php 中加入了一句代码:

$('.gallery a').lightBox();

D&Z Theme Pro CP 的用户只需在 header.php 文件中搜索一下“lightbox”这个关键词,然后将上面那句代码添加成如下形式即可:

$(function() {
    $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
    $('.gallery a').lightBox();
});

这里简单解释一下:
jQuery lightbox 的官方介绍(http://leandrovieira.com/projects/jquery/lightbox/)中可以得知调用 lightbox 特效的方法有如下几种:

$(function() {
	// Use this example, or...
	$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
	// This, or...
	$('#gallery a').lightBox(); // Select all links in object with gallery ID
	// This, or...
	$('a.lightbox').lightBox(); // Select all links with lightbox class
	// This, or...
	$('a').lightBox(); // Select all links in the page
	// ... The possibility are many. Use your creative or choose one in the examples above
});

当我们在 WordPress 中插入原生相册的时候,系统会自动在调用相册的源代码中加入 gallery 这个 class:
自动添加 gallery class

然后我根据 lightbox 的调用方法,将其中的

$('#gallery a').lightBox(); // 凡是带有 gallery ID 的对象都会启用 lightbox 特效

改为了

$('.gallery a').lightBox();// 凡是带有 gallery Class 的对象都会启用 lightbox 特效

即可,相当 Easy 吧~ 这样 D&Z Theme Pro CP 主题就能良好的支持 WordPress 原生相册的功能了!

那么在一个不支持 lightbox 的 wordpress 主题里我们要如何做呢?

先去官方网站下载一套 jQuery 的 lightbox plugin ,解压压缩包之后分别在 js 目录和 css 目录下找到如下3个文件:
jquery.js
jquery.lightbox-0.5.min.js
jquery.lightbox-0.5.css
将以上三个文件通过 FTP 上传到你所使用的 wordpress 主题目录下
打开主题的 header.php ,将如下代码加入到 <head></head> 标签内:

<script src="<?php bloginfo('template_directory'); ?>/jquery.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/jquery.lightbox-0.5.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/jquery.lightbox-0.5.css" type="text/css"></script>

然后再加入上文介绍的:

<script type="text/javascript">
$('#gallery a').lightBox();
$('.gallery a').lightBox();
</script>

就大功告成了~ 但是一般来说我们只会在文章页或者页面页调用相册功能,所以我们可以使用一个判断语句让它们只在这两类页面中加载:

<?php if (is_single() or is_archive or is_page()) { ?>
    <script src="<?php bloginfo('template_directory'); ?>/jquery.js" type="text/javascript"></script>
    <script src="<?php bloginfo('template_directory'); ?>/jquery.lightbox-0.5.min.js" type="text/javascript"></script>
    <script src="<?php bloginfo('template_directory'); ?>/jquery.lightbox-0.5.css" type="text/css"></script>
    <script type="text/javascript">
    $('#gallery a').lightBox();
    $('.gallery a').lightBox();
    </script>
<?php } ?>

That’s all~
使用以上方法我相信原生的 WordPress 相册就能满足大部分用户的需求了,用它来代替功能强大但略显臃肿的 NextGEN Gallery 相册插件基本没啥问题~

看过以上介绍还不赶紧给自己的主题加上这么酷的效果?

zEUS.

« »

已经有11人发表了评论

  1. 老大,请问如何在header.php中加载wordpress自身的jquery.js库文件???

  2. 我靠,林子你的变形金刚真多……

  3. 没抢到沙发。现在用的picasa相册没用本地存图所以暂时使不上。

  4. 好像和我的主题无缘了。。。

文章反相链接 Pingback/Trackback

  1. 无插件让Wordpress支持jquery lightbox » 四夕小罗
  2. 无插件实现 Wordpress Lightbox 特效 » 網生@誌 | zEUS.’Blog

发表您的看法

TOP COMMENTS BOTTOM