lightcase.js是一款非常智能灵活的jQuery Lightbox插件。它支持桌面和移动手机设备,使用CSS3作为动画过渡效果,支持图片,视频,flash,谷歌地图,内联元素,ajax调用等,非常强大。
使用方法
使用该lightbox插件需要在页面中引入lightcase.css和jQuery,以及lightcase.js文件。
<link rel="stylesheet" href="css/lightcase.css" type="text/css"/> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/lightcase.js"></script>
HTML结构
创建一个带data-rel="lightcase"
特性的超链接用于打开lightbox。
<a href="path/to/media.jpg" data-rel="lightcase">Your link description or thumb</a>
初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该lightbox插件。
<script type="text/javascript"> jQuery(document).ready(function($) { $('a[data-rel^=lightcase]').lightcase(); }); </script>
显示标题
如果你需要添加一个标题,可以简单的添加一个title属性。
<a href="path/to/media.jpg" data-rel="lightcase" title="Your title">Your link description or thumb</a>
调用不同存储的图片
lightcase.js会根据浏览器视口的大小来调用不同尺寸的图片。你可以在data-lc-href
属性中设置不同尺寸的高清大图。
<a href="" data-lc-href="path/to/media1_small.jpg, path/to/media1_large.jpg 2x" data-rel="lightcase">Your link description or thumb</a> <a href="" data-lc-href="path/to/media2_default.jpg, path/to/media2_small.jpg 320w, path/to/media2_small_2x.jpg 320w 2x" data-rel="lightcase">Link</a>
图片分组
带相同data-rel
属性的一组链接将会作为同一组图片被打开。
<a href="path/to/media1.jpg" data-rel="lightcase:myCollection">Your link description or thumb</a> <a href="path/to/media2.jpg" data-rel="lightcase:myCollection">Your second collection item</a> <a href="path/to/media3.jpg" data-rel="lightcase:myCollection">Your third item, and so on...</a>
在每个分组里面还可以设置不同的类别。
<a href="path/to/media1.jpg" data-rel="lightcase:myCollection" data-lc-categories="myCategory1 myCategory2">...</a> <a href="path/to/media2.jpg" data-rel="lightcase:myCollection" data-lc-categories="myCategory1">...</a> <a href="path/to/media3.jpg" data-rel="lightcase:myCollection" data-lc-categories="myCategory2 myCategory3 myCategory4">...</a>
幻灯片
如果分组中带有:slideshow
属性,将会使该分组进入幻灯片模式。
<a href="path/to/media.jpg" data-rel="lightcase:myCollection:slideshow" title="Your title">Your link description or thumb</a>
高级
回调函数
$('a[data-rel=lightcase]').lightcase({ // Would be called immediately after lightcase is initialized onInit : { foo: function() { alert('Lightcase process is initialized'); } }, // Would be called before generating content onStart : { bar: function() { alert('Lightcase process is started'); } }, // Would be called right before showing the content onFinish : { baz: function() { alert('Lightcase process is finished'); } }, // Would be called when aborting lightcase onClose : { qux: function() { alert('Lightcase closes now'); } }, // Would be called when lightcase does the cleanup onCleanup : { quux: function() { alert('Lightcase process is cleaned up'); } } });
如何从上面的回调函数中接收所有的DOM元素?
// All public available objects and methods console.log(lightcase); // Get the origin link object as a jQuery ready object console.debug($(this)); // Get a specific Lightcase DOM object (since v2.3.0) console.debug(lightcase.get('case'));
如何在一个空的弹出框中打开Lightcase?
// With javascript only and without any trigger link lightcase.start({ href: '#', // more options like width, height, etc. }); // From a simple link within markup <a href="#" data-rel="lightcase">Open blank popup</a>
如何以编程的方式关闭Lightcase?
// Call public function to close lightcase lightcase.close(); // Example for automatically closing lightcase after five seconds using a hook function $('#foo').lightcase({ onFinish: { autoClose: function () { setTimeout(function () { lightcase.close(); }, 5000); } } });
如果你需要手动调整lightcase的尺寸,可以调用resize()
方法。
lightcase.resize();
移动手机
如果你需要支持移动手机的swipe事件,需要引入jquery.events.swipe.js文件。
<script type="text/javascript" src="path/to/jquery.events.touch.js"></script> $('a[data-rel^=lightcase]').lightcase({ swipe: true });
移动手机的全屏模式
首先要确保fullscreenModeForMobile
参数可用,然后在你的页面<head>
中注明下面的<meta>
标记。
<meta name="viewport" content="width=device-width, initial-scale=1">
配置参数
参数 | 类型 | 默认值 | 描述 |
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 | 'data-rel' | 用于初始化分组的属性名称 |
href | String | null | 强制覆盖'href' 和 'data-href'的内容 |
type | String | null | 强制数据类型定义,如 'inline' 或 'ajax' |
typeMapping | Object | 'image' : 'jpg,…', 'flash' : 'swf', 'video' : 'mp4,...', 'iframe' : 'html,...', 'ajax' : 'txt', 'inline' : '#' |
管理媒体类型 |
errorMessage | String | '<p class="lightcase-error"... | 错误信息的标签 |
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元素被清理之后的回调函数 |
lightcase.js插件的github地址为:https://github.com/cbopp-art/lightcase/
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!