上一次介绍了Fancybox的使用:Fancybox–Ajax加载下图片灯箱的使用,今天再次推荐大家使用另一款也比较有名的图片灯箱插件—— Lightbox 。在这里介绍的主要原因是它有多种弹出层的效果,而不仅仅是图片。

可以看看:官方的介绍

lightbox
下面首先来说说如何在主题中集成这款灯箱插件。

准备工作

1、jQuery库支持,没有加载的这个要加上,lightbox_1.8.0已经适用于最新的jQuery库了。

<script type="text/javascript" src="//libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

2、下载js、css和相关的部件图片
Lightbox_1.8.3下载地址

引用相应的文件

下载好之后引用js文件,放在主题的js文件夹,可以在footer.php的body结束标签之前引用(也可以和其他js文件合并):

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/Lightbox.min_1.8.0.js"></script>

引用CSS文件,放在主题根目录,在header.php的head结束标签之前引用

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory'); ?>/jquery.lightbox.css" />

注意css中图片的位置,将图片放入相应的文件夹,修改css中的路径即可。

关键步骤

执行lightbox()函数,对象为以lightbox为类的a标签,类似<a href="http://www.inlojv.com/" class="lightbox">Lightbox效果</a>
由于我们文章中的图片div标签组成是这样的:<a href="..."><img src="..." /></a>,a标签上没有名为lightbox的类,所以在js中要加入该类名后再执行lightbox()函数,代码如下:

$(document).ready(function(){ 
    addLightbox();    
});
function addLightbox(){
    $('.post-content img').parent('a').addClass('lightbox');//.post-content改成你的类
    $('.lightbox').lightbox();
}

而若还有Ajax加载,那么就要把上面的addLightbox()函数放入ajax方法成功后的successcomplete里面重新加载一遍,这样在Ajax下灯箱就不会失效了。


弹出嵌套层的用法

图片灯箱是弹出图片的,我们可以利用其来弹出嵌套的页面,当上面的步骤都完成之后,只需要修改一下a标签中的href值(给链接加一段参数设定的小尾巴),就可以改成弹出嵌套层的模式。例如:

<a href="http://www.inlojv.com/?lightbox[iframe]=true&lightbox[width]=1150&lightbox[height]=500" class="lightbox" >点我查看弹出效果</a>

点我查看弹出效果

还不错吧?!本站底部的“代码高亮”链接就是采用这种弹出方式。