前端技术文档及相关资料下载
关于前端html、css、js等技术上的各种疑难棘手问题的解决方案探讨及相关资料下载！
JQuery多功能弹出层插件lightcase
简介
Lightcase是一款JQuery多功能弹出层插件， 支持照片，视频，HTML5 视频，iframe，swf 和 ajax 调用。
 |
|---|
参数说明：
| 参数 | 类型 | 默认值 | 描述 | ||||
| id | String | 'lightcase-case' | lightbox容器的ID | ||||
| tempIdPrefix | String | 'lightcase-temp-' | 被复制内容的前缀 | ||||
| classPrefix | String | 'lightcase-' | lightcase对象的前缀名称 | ||||
| attrPrefix | String | 'lc-' | lightcase所有属性的前缀 | ||||
| transition | String | 'elastic' | 幻灯片的过渡效果。可用值有：none', 'fade', 'fadeInline', 'elastic', 'scrollTop', 'scrollRight', 'scrollBottom', 'scrollLeft', 'scrollHorizontal' 和 'scrollVertical' | ||||
| transitionIn | String|null | null | 外部定义的进入过渡动画 | ||||
| transitionOut | String|null | null | 外部定义的离开过渡动画 | ||||
| cssTransitions | Boolean | true | 是否允许css过渡动画 | ||||
| speedIn | Integer | 350 | 开始过渡动画的动画速度 | ||||
| speedOut | Integer | 250 | 结束过渡动画的动画速度 | ||||
| maxWidth | Integer | 800 | media内容的最大宽度 | ||||
| maxHeight | Integer | 500 | media内容的最大高度 | ||||
| forceWidth | Boolean | false | 强制宽度 | ||||
| forceHeight | Boolean | false | 强制高度 | ||||
| liveResize | Boolean | true | 是否允许调整尺寸 | ||||
| fullScreenModeForMobile | Boolean | true | 是否允许移动手机的全屏模式 | ||||
| mobileMatchExpression | RegExp | /(iphone|ipod|ipad...)/ | 哪些移动设备可以进入全屏模式 | ||||
| disableShrink | Boolean | false | Disable the shrink completely | ||||
| shrinkFactor | Integer | .75 | Factor (in percent) to shrink the media content to recalculate dimensions | ||||
| overlayOpacity | Integer | .9 | 遮罩层的比例 | ||||
| slideshow | Boolean | false | 默认将分组作为幻灯片 | ||||
| timeout | Integer | 5000 | 幻灯片切换的延迟时间 | ||||
| swipe | Boolean | true | 是否允许移动手机的swipe事件 | ||||
| useKeys | Boolean | true | 是否允许使用键盘导航 | ||||
| useCategories | Boolean | true | 是否允许在分组中再指定类别 | ||||
| navigateEndless | Boolean | true | 如果为true，幻灯片将无限循环 | ||||
| closeOnOverlayClick | Boolean | true | 是否在点击遮罩层时改变lightbox | ||||
| title | String|null | null | 标题 | ||||
| caption | String|null | null | 标题的内容 | ||||
| showTitle | Boolean | true | 是否显示标题 | ||||
| showCaption | Boolean | true | 是否从alt属性中显示标题 | ||||
| showSequenceInfo | Boolean | true | 是否显示当前分组的信息 | ||||
| inline | Object | width : 'auto', height : 'auto | 内联元素的参数对象 | ||||
| ajax | Object | width : 'auto', height : 'auto', type : 'get', dataType : 'html', data : {} | ajax元素的参数对象 | ||||
| iframe | Object | width : 'auto', height : 'auto', frameborder : 0 | iframe元素的参数对象 | ||||
| flash | Object | width : 400, height : 205, wmode : 'transparent' | flash元素的参数对象 | ||||
| video | Object | width : 400, height : 225, poster : '', preload : 'auto', controls : true, autobuffer : true, autoplay : true, loop : false | video元素的参数对象 | ||||
| attr | String | '>用于初始化分组的属性名称 | |||||
| href | String | null | 强制覆盖'href' 和 '> | type | String | null | 强制数据类型定义，如 'inline' 或 'ajax' |
| typeMapping | Object | 'image' : 'jpg,…', 'flash' : 'swf', 'video' : 'mp4,...', 'iframe' : 'html,...', 'ajax' : 'txt', 'inline' : '#' | 管理媒体类型 | ||||
| errorMessage | String | '<p... | 错误信息的标签 | ||||
| labels | Object | 'errorMessage': 'Source could not be found...', 'sequenceInfo.of': ' of ', 'close': 'Close', 'navigator.prev': 'Prev', 'navigator.next': 'Next', 'navigator.play': 'Play', 'navigator.pause': 'Pause' | 标签的文本 | ||||
| markup | Function | function() { $('body').append(... } | Browse the whole the function in the source file 'lightcase.js' | ||||
| onInit | Object | {foo: function () {}} | 初始化之前的回调函数 | ||||
| onStart | Object | {foo: function () {}} | 生成内容之前的回调函数 | ||||
| onFinish | Object | {foo: function () {}} | 生成内容之后的回调函数 | ||||
| onClose | Object | {foo: function () {}} | 在aborting操作之前的回调函数 | ||||
| onCleanup | Object | {foo: function () {}} | 在DOM元素被清理之后的回调函数 |
使用
1. 引入文件
<link rel="stylesheet" href="static/css/lightcase.css">
<script src="static/js/jquery-3.2.1.min.js"></script>
<script src="static/js/lightcase.js"></script>2. HTML
<a id="imgheadBig" data-rel="lightcase" href="" title="">
<img style="float:left ;width: 100%;height: 100%;" class="imghead" id="imghead"/>
</a>
注意：
id：属性必须；
data-rel属性必须，取值”lightcase“；
href图片超链接（弹出层展示的图片的src，此值务必在页面加载完成时赋值）；
title:图片标题，默认在图片左下角显示，可选。
3. 调用
$(document).ready(function($) {
$('#imgheadBig').lightcase({transition : 'scrollTop'});
});相关链接
官网地址 ：https://cdnjs.com/libraries/lightcase