lightGallery是一款輕量級、可定制、響應(yīng)式、模塊化的jQuery LightBox圖片畫廊插件。它支持移動觸摸設(shè)備，支持鍵盤控制，帶20多種動畫過渡效果，是一款非常優(yōu)秀的LightBox插件。它的特點(diǎn)還有：

完全響應(yīng)式。

內(nèi)置插件的模塊化結(jié)構(gòu)。

支持移動手機(jī)觸摸屏。

支持在桌面設(shè)備使用鼠標(biāo)拖拽。

縮略圖動畫。

支持Youtube，Vimeo和HTML5視頻。

20多種硬件加速CSS3動畫過渡效果。

動態(tài)模式。

支持全屏模式。

支持縮放。

支持瀏覽器history API。

響應(yīng)式圖片。

支持iframe框架。

同一個頁面可以實例化多個實例。

通過CSS可以很容易的修改樣式。

智能圖像預(yù)載及代碼優(yōu)化。

支持桌面設(shè)備中使用鍵盤導(dǎo)航。

支持字體圖標(biāo)。

安裝

你可以通過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結(jié)構(gòu)

該LightBox插件沒有強(qiáng)制性的HTML結(jié)構(gòu)，但是建議使用下面的HTML結(jié)構(gòu)來構(gòu)建：

...

初始化插件

在頁面DOM元素加載完畢之后，可以通過下面的方法來初始化該LightBox插件。

$(document).ready(function() {

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

});

配置參數(shù)

Lightgallery有非常多的可用參數(shù)，使用參數(shù)的方法如下：

$('#lightgallery').lightGallery({

mode: 'lg-fade',

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

......

});

核心參數(shù)

參數(shù)名稱

類型

默認(rèn)值

描述

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'。關(guān)于這些效果的詳細(xì)解釋可以參考這里

cssEasing

string

'ease'

使用CSS動畫的easing效果

easing

string

'linear'

使用jQuery動畫的easing效果

speed

number

600

動畫過渡的持續(xù)時間，單位毫秒

height

string

'100%'

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

width

string

'100%'

畫廊的寬度。例如：'100%'，'300px'

addClass

string

''

在畫廊上添加自定義的class類，通過它為畫廊設(shè)置不同的樣式

startClass

string

'lg-start-zoom'

畫廊的開始動畫的class類

backdropDuration

number

150

畫廊的backdrop transtion持續(xù)時間。不要通過CSS來修改這個值

hideBarsDelay

number

6000

隱藏畫廊的控制面板的延遲時間，單位毫秒

useLeft

boolean

false

強(qiáng)制插件使用left屬性來替代transform屬性

closable

boolean

true

是否允許點(diǎn)擊按鈕來關(guān)閉LightBox畫廊

loop

boolean

true

設(shè)置為false時，將不能在最后一張圖片時返回第一張圖片

escKey

boolean

true

是否可以通過“ESC”鍵來關(guān)閉LightBox畫廊

keyPress

boolean

true

是否允許鍵盤導(dǎo)航

controls

boolean

true

如果設(shè)置為false，prev/next按鈕將不會顯示

slideEndAnimatoin

bolean

true

Enable slideEnd animation

hideControlOnEnd

boolean

false

如果設(shè)置為true，prev/next按鈕將不會在第一張和最后一張圖片時顯示

mousewheel

boolean

true

是否允許使用鼠標(biāo)來滾動LightBox畫廊

appendSubHtmlTo

string

'.lg-sub-html'

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

preload

number

1

預(yù)加載圖片的數(shù)量，會在當(dāng)前的slide完全加載后執(zhí)行

showAfterLoad

boolean

true

在完全加載后顯示內(nèi)容

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

設(shè)置哪一個圖片或vedio在初始化時被顯示

iframeMaxWidth

string

'100%'

設(shè)置iframe的最大寬度

download

boolean

true

是否啟用下載按鈕。

counter

boolean

true

是否顯示圖片的總數(shù)量和當(dāng)前圖片的序號

appendCounterTo

string

'.lg-toolbar'

counter添加到什么地方

swipeThreshold

number

50

通過設(shè)置swipeThreshold(單位像素)，你可以控制用戶滑動前一幅和下一幅圖片的速度

enableDrag

boolean

true

是否允許在桌面設(shè)備中使用鼠標(biāo)來拖拽

enableTouch

boolean

true

是否支持移動觸摸

dynamic

boolean

false

設(shè)置該選項為true和填寫dynamicEl選項可以使LightGallery以編程的方式實例化

dynamicEl

array

[]

代表畫廊對象的數(shù)組對象(src, iframe, subHtml, thumb, poster, responsive, srcset sizes)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。