无插件让 Wordpress 原生相册支持 lightbox
不提倡使用过多的 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：
然后我根据 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 type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.js"></script> <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(); }); </script>
就大功告成了～ 但是一般来说我们只会在文章页或者页面页调用相册功能，所以我们可以使用一个判断语句让它们只在这两类页面中加载：
<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(); }); </script> <?php } ?>
That’s all~
使用以上方法我相信原生的 Wordpress 相册就能满足大部分用户的需求了，用它来代替功能强大但略显臃肿的 NextGEN Gallery 相册插件基本没啥问题～
看过以上介绍还不赶紧给自己的主题加上这么酷的效果？
zEUS.
- 原文链接:
- 转载原创文章请注明:
Name : zEUS.
我靠，林子你的变形金刚真多……
不错，收藏了！
没抢到沙发。现在用的picasa相册没用本地存图所以暂时使不上。
我等了很久了!!
好像和我的主题无缘了。。。