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)

總結

以上是生活随笔為你收集整理的html5彩盒插件画廊,jQuery轻量级响应式LightBox图片画廊插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。