建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery多功能弹出层插件lightcase

来源:易助科技网浏览量:12收藏

简介


Lightcase是一款JQuery多功能弹出层插件, 支持照片,视频,HTML5 视频,iframe,swf 和 ajax 调用。


JQuery多功能弹出层插件lightcase-示例图


参数说明:


参数类型默认值描述
idString'lightcase-case'lightbox容器的ID
tempIdPrefixString'lightcase-temp-'被复制内容的前缀
classPrefixString'lightcase-'lightcase对象的前缀名称
attrPrefixString'lc-'lightcase所有属性的前缀
transitionString'elastic'幻灯片的过渡效果。可用值有:none', 'fade', 'fadeInline', 'elastic', 'scrollTop', 'scrollRight', 'scrollBottom', 'scrollLeft', 'scrollHorizontal' 和 'scrollVertical'
transitionInString|nullnull外部定义的进入过渡动画
transitionOutString|nullnull外部定义的离开过渡动画
cssTransitionsBooleantrue是否允许css过渡动画
speedInInteger350开始过渡动画的动画速度
speedOutInteger250结束过渡动画的动画速度
maxWidthInteger800media内容的最大宽度
maxHeightInteger500media内容的最大高度
forceWidthBooleanfalse强制宽度
forceHeightBooleanfalse强制高度
liveResizeBooleantrue是否允许调整尺寸
fullScreenModeForMobileBooleantrue是否允许移动手机的全屏模式
mobileMatchExpressionRegExp/(iphone|ipod|ipad...)/哪些移动设备可以进入全屏模式
disableShrinkBooleanfalseDisable the shrink completely
shrinkFactorInteger.75Factor (in percent) to shrink the media content to recalculate dimensions
overlayOpacityInteger.9遮罩层的比例
slideshowBooleanfalse默认将分组作为幻灯片
timeoutInteger5000幻灯片切换的延迟时间
swipeBooleantrue是否允许移动手机的swipe事件
useKeysBooleantrue是否允许使用键盘导航
useCategoriesBooleantrue是否允许在分组中再指定类别
navigateEndlessBooleantrue如果为true,幻灯片将无限循环
closeOnOverlayClickBooleantrue是否在点击遮罩层时改变lightbox
titleString|nullnull标题
captionString|nullnull标题的内容
showTitleBooleantrue是否显示标题
showCaptionBooleantrue是否从alt属性中显示标题
showSequenceInfoBooleantrue是否显示当前分组的信息
inlineObjectwidth : 'auto',
height : 'auto
内联元素的参数对象
ajaxObjectwidth : 'auto',
height : 'auto',
type : 'get',
dataType : 'html',
data : {}
ajax元素的参数对象
iframeObjectwidth : 'auto',
height : 'auto',
frameborder : 0
iframe元素的参数对象
flashObjectwidth : 400,
height : 205,
wmode : 'transparent'
flash元素的参数对象
videoObjectwidth : 400,
height : 225,
poster : '',
preload : 'auto',
controls : true,
autobuffer : true,
autoplay : true,
loop : false
video元素的参数对象
attrString'>用于初始化分组的属性名称
hrefStringnull强制覆盖'href' 和 '>typeStringnull强制数据类型定义,如 'inline' 或 'ajax'
typeMappingObject'image' : 'jpg,…',
'flash' : 'swf',
'video' : 'mp4,...',
'iframe' : 'html,...',
'ajax' : 'txt',
'inline' : '#'
管理媒体类型
errorMessageString'<p...错误信息的标签
labelsObject'errorMessage': 'Source could not be found...',
'sequenceInfo.of': ' of ',
'close': 'Close',
'navigator.prev': 'Prev',
'navigator.next': 'Next',
'navigator.play': 'Play',
'navigator.pause': 'Pause'
标签的文本
markupFunctionfunction() {
$('body').append(...
}
Browse the whole the function in the source file 'lightcase.js'
onInitObject{foo: function () {}}初始化之前的回调函数
onStartObject{foo: function () {}}生成内容之前的回调函数
onFinishObject{foo: function () {}}生成内容之后的回调函数
onCloseObject{foo: function () {}}在aborting操作之前的回调函数
onCleanupObject{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