Lightbox弹出层插件：jQuery弹出层插件用法

红太狼 2022-04-12 09:56 342阅读 0赞

**插件描述**：这款**lightbox,**可应用于图片、swf文件、html文件等等。

![Lightbox弹出层插件][Lightbox] Lightbox弹出层插件

**说明文档  :**

1.引入资源，(JQ1.3+)和JS文件：

<a href="images/a1.jpg" class="lightbox">这是一个最简单的弹层</a>

<a href="images/a1.jpg" class="lightbox" rel="pic">数组类设置属性"rel"</a>
    <a href="images/a1.jpg" class="lightbox" rel="pic">数组类设置属性"rel"</a>
    <a href="images/a1.jpg" class="lightbox" rel="pic">数组类设置属性"rel"</a>

<a href="images/a1.jpg?lightbox[width]=400&lightbox[height]=400" class="lightbox">弹出层固定大小</a>

<a href="images/a1.jpg?lightbox[maximized]=true" class="lightbox">弹出层随浏览器窗口滚动</a>

<a href="test.html?lightbox[width]=350&lightbox[height]=170" class="lightbox">弹出层加载html文件,注意需要指定层大小</a>
    <a href="http://player.youku.com/player.php/sid/XNzU0NjEzODU2/v.swf?lightbox[width]=700&lightbox[height]=400" class="lightbox">弹出层加载swf视频文件,注意需要指定层大小</a>

**参数配置：**

参数名 参数说明 可选值 默认值  
参数名 参数说明 参数取值 默认值  
verlayBgColor 定义覆盖层的颜色 颜色值 默认值：\#000 (black)  
overlayOpacity 定义覆盖层的的透明度 0-1的小数 0.8  
imageLoading 设置加载动画 图片路径字符串 images/lightbox-ico-loading.gif  
imageBtnClose 设置关闭弹出框的按钮图片路径 图片路径字符串 images/lightbox-btn-close.gif  
imageBtnPrev 设置弹出框上一张图片导航按钮图片路径 图片路径字符串 images/lightbox-btn-prev.gif  
imageBtnNext 设置弹出框下一张图片导航按钮图片路径 图片路径字符串 images/lightbox-btn-next.gif  
containerBorderSize 设置图片框的边框大小 整数 10  
containerResizeSpeed 重置图片容器的速度 整数 400  
keyToNext 显示下一张幻灯片的快捷键 键字母 n  
keyToPrev 显示上一张幻灯片的快捷键 键字母 p  
keyToClose 关闭幻灯片的快捷键 键字母 c

小案例：[www.nongyejing.com][]

[Lightbox]: /images/20220412/4da225d4f6d347fb907107dbfb273080.png
[www.nongyejing.com]: http://www.nongyejing.com