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

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

说明文档 :

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

<script type="text/javascript" src="js/jquery.min.js"></script><!--lightbox开始--><link rel="stylesheet" type="text/css" href="js/lightbox/themes/default/jquery.lightbox.css" /><!--[if IE 6]><link rel="stylesheet" type="text/css" href="js/lightbox/themes/default/jquery.lightbox.ie6.css" />
<![endif]--><script type="text/javascript" src="js/lightbox/jquery.lightbox.min.js"></script><script type="text/javascript">jQuery(document).ready(function($){$('.lightbox').lightbox();});</script><!--结束-->

<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弹出层插件：jQuery弹出层插件用法相关推荐

html 弹出层插件,jQuery弹出层插件(原创)
插件描述:简约的jQuery弹出层插件更新时间:2020-01-17 23:37:28 更新说明:版本v4.3.0 1.修复最大化可拖动.改变大小的问题 2.去除对于图片的依赖 3.更新拖动插件 4 ...
html中表单的校验的插件,jquery表单验证插件validationEngine
插件的特色: 封装强悍.例子充足(基本都验证类型都被囊括).调用轻便注意事项: 1.演示版本为 v2.2.4: 2.v2.0 以下的版本参数并不完全通用: 对 validationEngine.jq ...
360全景html插件,jQuery 360度全景图插件 PANORAMA VIEWER
插件描述:PANORAMA VIEWER将帮助您把全景照片嵌入在网站上.使用鼠标拖拽方试查看效果. 基本用法现在你可以用这个插件显示你的全景照片.因此,首先你必须将最新的jQuery库,jquery ...
html组织架构插件,jQuery组织架构图插件okrTree.js
插件描述:jQuery组织架构图支持拖拽节点,支持插入标记节点,分支节点更新时间:2021-03-02 23:52:07 更新说明: 1. 修改默认主题, 2. 添加自定义主题接口var s = $ ...
html中轮换图片插件,jQuery轮播图插件
插件描述:该插件基于jquery开发,现阶段很多PC网站都需要用到轮播图切换的效果全屏轮播图该插件基于jquery开发,现阶段很多PC网站都需要用到轮播图切换的效果,很多时候要在页面中复用轮播图, ...
html页面左右滑动固定插件,jQuery全屏滚动插件fullPage.js让你的页面分屏滚动
随着扁平化风格的日益流行,越来越多的网页越来越简单但又看上去高大上,比如小米.魅族.苹果等等知名站点的新品页面,以及360.百度等网站的专题页面越来越采用分屏滚动的风格. 当然实现这种风格的方法有多种 ...
html电商数量加减插件,jQuery数字加减插件
左右加减数字像京东提交订单时目前使用的是左右加减数字的效果,这个效果直接明了,操作简单.我们使用jquery.spinner.js插件实现左右加减数字,调用方法非常简单,请看演示示例1. 调用也非常 ...
html mp4播放器插件,jQuery mp4视频播放器插件
使用方法: 1.head引入css文件 #video { width: 970px; height: 594px; margin: 0 auto; position: relative; } #vid ...
[置顶] 推荐一款好用的jquery弹出层插件——wbox
在我们做项目的过程中难免会让弹出层来展示一些信息,这里推荐一款比较不错的jquery插件,下面说一下特点和新版本增加的功能 wBox特点背景透明度可以根据实际情况进行调节可以根据需要添加wBox标 ...
使用jquery的blockui插件显示弹出层
使用jquery的blockui插件显示弹出层 Posted on 2011-04-14 16:34 孤独者阅读(9975) 评论(0) 编辑收藏在做网站的开发过程中,可能需要使用弹出层,使用j ...

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

Lightbox弹出层插件：jQuery弹出层插件用法相关推荐

最新文章

热门文章