slick-lightbox.js是一款基于slick.js和jquery的响应式弹出层lightbox插件。该jquery lightbox插件支持图片懒加载，支持键盘交互，支持HTML5 History API等。功能非常强大。
在线预览 下载
安装
可以通过bower来安装slick-lightbox.js插件。
bower install -S slick-lightbox
使用方法
在页面中引入slick-lightbox.css，jquery和slick-lightbox.js文件。
< link rel="stylesheet" href="css/slick-lightbox.css"> < script type="text/javascript" src="js/jquery.min.js"> < script type="text/javascript" src="js/slick-lightbox.js">
HTML结构
使用该弹出层lightbox插件基本的HTML代码如下：
< html >
< head >< title >slick lightbox< meta name="viewport" content="width=device-width">< link rel="stylesheet" type="text/css" href="bower_components/slick-carousel/slick/slick.css">< link rel="stylesheet" type="text/css" href="bower_components/slick-carousel/slick/slick-theme.css">< link rel="stylesheet" type="text/css" href="styles/slick-lightbox.css">< body >< div >< ul >< li >< a href="http://placekitten.com/1600/1300" data-caption="Lorem ipsum 1600x1300">图片1< li >< a href="http://placekitten.com/1630/1280" data-caption="Lorem ipsum 1630x1280">图片2< li >< a href="http://placekitten.com/1500/1250" data-caption="Lorem ipsum 1500x1250">图片3< script type="text/javascript" src="bower_components/jquery/dist/jquery.js">< script type="text/javascript" src="bower_components/slick-carousel/slick/slick.min.js">< script type="text/javascript" src="scripts/slick-lightbox.js">< script type="text/javascript">$(document).ready(function(){$('ul').slickLightbox({itemSelector: '> li > a'});});
配置参数
slick-lightbox.js lightbox插件的可用配置参数如下：
| 参数 | 类型 | 默认值 | 描述 |
| background | string | rgba(0,0,0,.8) | lightbox的背景颜色。 |
| closeOnEscape | boolean | true | 是否可以通过ESC键关闭lightbox。 |
| closeOnBackdropClick | boolean | true | 是否可以通过点击背景关闭lightbox。 |
| destroyTimeout | number | 500 | 从DOM中移除lightbox之前需要等待多少毫秒。 |
| itemSelector | string | a | 类似jquery选择器。指向图片的锚链接选择器。 |
| navigateByKeyboard | boolean | true | 是否可以通过键盘来控制lightbox。 |
| slick | object | {} | 传入carousel的slick选项。 |
| caption | various | false | 是否设置图片标题？ |
| src | various | false | 如何获取图片？设置为false则使用href属性。 |
| captionPosition | various | 'dynamic' | 图片标题放置的位置。 |
| images | various | false | 如果传入一个数组，那么插件就不会使用图片的url，而是直接使用这个数组。 |
| useHistoryApi | boolean | false | 设置为true时，打开图片将会有一个history.pushState。 |
| layouts | object | ||
| shouldOpen | function | null | |
| imageMaxHeight | number | 0.9 | 相对于视口高度的图片最大高度。 |
| lazy | boolean | false | 图片是否懒加载？ |
| lazyPlaceholder | string | null | 图片懒加载的占位图片地址。 |
事件
slick-lightbox.js lightbox插件的可用事件参数如下：
| 事件 | 描述 |
| show.slickLightbox | 当lightbox打开时触发。 |
| shown.slickLightbox | 当lightbox打开时，转换完成之后触发。 |
| hide.slickLightbox | 当lightbox关闭时触发。 |
| hidden.slickLightbox | 当lightbox关闭时，转换完成之后触发。 |
$(document).ready( function (){$( 'ul' ).slickLightbox().on({'show.slickLightbox' : function (){ console.log( 'A `show.slickLightbox` event triggered.' ); },1'shown.slickLightbox' : function (){ console.log( 'A `shown.slickLightbox` event triggered.' ); },'hide.slickLightbox' : function (){ console.log( 'A `hide.slickLightbox` event triggered.' ); },'hidden.slickLightbox' : function (){ console.log( 'A `hidden.slickLightbox` event triggered.' ); }});
});
