html5彩盒插件画廊,jQuery轻量级响应式LightBox图片画廊插件

lightGallery是一款轻量级、可定制、响应式、模块化的jQuery LightBox图片画廊插件。它支持移动触摸设备，支持键盘控制，带20多种动画过渡效果，是一款非常优秀的LightBox插件。它的特点还有：

完全响应式。

内置插件的模块化结构。

支持移动手机触摸屏。

支持在桌面设备使用鼠标拖拽。

缩略图动画。

支持Youtube，Vimeo和HTML5视频。

20多种硬件加速CSS3动画过渡效果。

动态模式。

支持全屏模式。

支持缩放。

支持浏览器history API。

响应式图片。

支持iframe框架。

同一个页面可以实例化多个实例。

通过CSS可以很容易的修改样式。

智能图像预载及代码优化。

支持桌面设备中使用键盘导航。

支持字体图标。

安装

你可以通过Bower或nmp来安装该LightBox插件。

$ bower install lightgallery --save

$ npm install lightgallery

使用方法

使用该LightBox插件需要引入lightGallery.css，jQuery(版本大于1.8)，lightgallery.min.js文件，以及辅助的lg-thumbnail.min.js和lg-fullscreen.min.js文件。

HTML结构

该LightBox插件没有强制性的HTML结构，但是建议使用下面的HTML结构来构建：

...

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该LightBox插件。

$(document).ready(function() {

$("#lightgallery").lightGallery();

});

配置参数

Lightgallery有非常多的可用参数，使用参数的方法如下：

$('#lightgallery').lightGallery({

mode: 'lg-fade',

cssEasing : 'cubic-bezier(0.25, 0, 0.25, 1)'

......

});

核心参数

参数名称

类型

默认值

描述

mode

string

'lg-slide'

画廊的动画过渡效果。可用的效果有：'Slide'，'lg-fade'，'lg-zoom-in'，'lg-zoom-in-big'，'lg-zoom-out'，'lg-zoom-out-big'，'lg-zoom-out-in'，'lg-zoom-in-out'，'lg-soft-zoom'，'lg-scale-up'，'lg-slide-circular'，'lg-slide-circular-vertical'，'lg-slide-vertical'，'lg-slide-vertical-growth'，'lg-slide-skew-only'，'lg-slide-skew-only-rev'，'lg-slide-skew-only-y'，'lg-slide-skew-only-y-rev'，'lg-slide-skew'，'lg-slide-skew-rev'，'lg-slide-skew-cross'，'lg-slide-skew-cross-rev'，'lg-slide-skew-ver'，'lg-slide-skew-ver-rev'，'lg-slide-skew-ver-cross'，'lg-slide-skew-ver-cross-rev'，'lg-lollipop'，'lg-lollipop-rev'，'lg-rotate'，'lg-rotate-rev'，'lg-tube'。关于这些效果的详细解释可以参考这里

cssEasing

string

'ease'

使用CSS动画的easing效果

easing

string

'linear'

使用jQuery动画的easing效果

speed

number

600

动画过渡的持续时间，单位毫秒

height

string

'100%'

画廊的高度。例如：'100%'，'300px'

width

string

'100%'

画廊的宽度。例如：'100%'，'300px'

addClass

string

''

在画廊上添加自定义的class类，通过它为画廊设置不同的样式

startClass

string

'lg-start-zoom'

画廊的开始动画的class类

backdropDuration

number

150

画廊的backdrop transtion持续时间。不要通过CSS来修改这个值

hideBarsDelay

number

6000

隐藏画廊的控制面板的延迟时间，单位毫秒

useLeft

boolean

false

强制插件使用left属性来替代transform属性

closable

boolean

true

是否允许点击按钮来关闭LightBox画廊

loop

boolean

true

设置为false时，将不能在最后一张图片时返回第一张图片

escKey

boolean

true

是否可以通过“ESC”键来关闭LightBox画廊

keyPress

boolean

true

是否允许键盘导航

controls

boolean

true

如果设置为false，prev/next按钮将不会显示

slideEndAnimatoin

bolean

true

Enable slideEnd animation

hideControlOnEnd

boolean

false

如果设置为true，prev/next按钮将不会在第一张和最后一张图片时显示

mousewheel

boolean

true

是否允许使用鼠标来滚动LightBox画廊

appendSubHtmlTo

string

'.lg-sub-html'

指定“sub-html”添加在何处。'.lg-sub-html' 或 '.lg-item'

preload

number

1

预加载图片的数量，会在当前的slide完全加载后执行

showAfterLoad

boolean

true

在完全加载后显示内容

selector

string

''

Custom selector property instead of just child. pass this to select same element ex : .class #id

nextHtml

string

''

自定义“next”控制按钮的HTML

prevHtml

string

''

自定义“prev”控制按钮的HTML

index

number

0

设置哪一个图片或vedio在初始化时被显示

iframeMaxWidth

string

'100%'

设置iframe的最大宽度

download

boolean

true

是否启用下载按钮。

counter

boolean

true

是否显示图片的总数量和当前图片的序号

appendCounterTo

string

'.lg-toolbar'

counter添加到什么地方

swipeThreshold

number

50

通过设置swipeThreshold(单位像素)，你可以控制用户滑动前一幅和下一幅图片的速度

enableDrag

boolean

true

是否允许在桌面设备中使用鼠标来拖拽

enableTouch

boolean

true

是否支持移动触摸

dynamic

boolean

false

设置该选项为true和填写dynamicEl选项可以使LightGallery以编程的方式实例化

dynamicEl

array

[]

代表画廊对象的数组对象(src, iframe, subHtml, thumb, poster, responsive, srcset sizes)