jQuery lightBox plugin 灯箱效果

一个灯箱效果的图片展示插件。

版本：

jQuery v1.2.3+

jQuery lightBox v0.5

注意事项：

1.需载入 css 文件，配合使用（也可以合并到你的 css 文件中）

2.链接属性：<a href="图片地址" title="文字说明"></a>

在源文件（css 和 js）基础上有进行修改，修改如下：

1.修改了参数中5张图片的默认值，并更换了图片进行美化；

2.去除了"txtImage"、"txtOf"参数，文字固定为："共X张 第N张"。

• 修改版：jQuery lightBox plugin 灯箱效果
• 原　版：jquery lightbox 0.5

【示例】

• 
• 
• 
• 
• 

【options 参数说明】

名称	默认值	说明
overlayBgColor	"#000"	背景色
overlayOpacity	0.8	背景色透明度
fixedNavigation	false	是否始终显示上一张、下一张按钮
imageLoading	"img/lightbox-0.5/lightbox-ico-loading.gif"	加载图片时显示的图片
imageBtnPrev	"img/lightbox-0.5/lightbox-btn-prev.gif"	上一张按钮的图片
imageBtnNext	"img/lightbox-0.5/lightbox-btn-next.gif"	下一张按钮的图片
imageBtnClose	"img/lightbox-0.5/lightbox-btn-close.gif"	关闭按钮的图片
imageBlank	"img/lightbox-0.5/lightbox-blank.gif"	上一张、下一张按钮周围空白部分的图片（默认透明）
containerBorderSize	10	展示图片的边框宽度
containerResizeSpeed	400	展示过程切换的速度
keyToClose	"c"	关闭展示的快捷键
keyToPrev	"p"	上一张的快捷键
keyToNext	"n"	下一张的快捷键

【使用方法】

载入 CSS 文件

<link rel="stylesheet" href="jquery.lightbox-0.5.css">

载入 JavaScript 文件

<script src="js/jquery.js"></script> 
<script src="js/jquery.lightbox-0.5.js"></script> 

DOM 结构

<div id="element_id"> 
    <a href="img/image3.jpg" title="文字说明"><img src="img/thumb_image3.jpg" width="72" height="72"></a> 
</div> 

调用 lightBox

$("#gallery a").lightBox(); 
// lightBox 的使用范围是根据 jQuery 选择器来设置的，所以可以有更多的设置方法，例如： 
$("a[@rel*=lightbox]").lightBox();