jquery响应式弹出层lightbox插件slick-lightbox.js_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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/