jquery响应式弹出层lightbox插件slick-lightbox.js

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