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)
總結
以上是生活随笔為你收集整理的html5彩盒插件画廊,jQuery轻量级响应式LightBox图片画廊插件的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: MyEclipse 2014 之 安装
- 下一篇: CAD盗图木马分析与处置策略