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>                  
<script type="text/javascript" src="js/slick-lightbox.js"></script>
HTML结构

使用该弹出层lightbox插件基本的HTML代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>slick lightbox</title>
  <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">
</head>
<body>
  <div>
    <ul>
      <li><a href="http://placekitten.com/1600/1300" data-caption="Lorem ipsum 1600x1300">图片1</a></li>
      <li><a href="http://placekitten.com/1630/1280" data-caption="Lorem ipsum 1630x1280">图片2</a></li>
      <li><a href="http://placekitten.com/1500/1250" data-caption="Lorem ipsum 1500x1250">图片3</a></li>
    </ul>
  </div>
  <script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
  <script type="text/javascript" src="bower_components/slick-carousel/slick/slick.min.js"></script>
  <script type="text/javascript" src="scripts/slick-lightbox.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $('ul').slickLightbox({
        itemSelector: '> li > a'
      });
    });
  </script>
</body>
</html>

配置参数

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.'); }
  });
});

slick-lightbox.js lightbox插件的github地址为：https://github.com/mreq/slick-lightbox/