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文件。

HTML结构

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




  slick lightbox
  
  
  
  


  
    
      图片1
      图片2
      图片3

配置参数

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/