線上預覽 源碼下載 lightgallery.js是一款純JavaScript輕量級響應式lightbox插件。該Lightbox插件支持圖片，視頻，iframe等多種媒體。支持全屏，導航，縮放，下載等功能，還支持多種動畫過渡效果。lightgallery.js的特點還有： 完全響應式設計。 內置插 ...
lightgallery.js是一款純JavaScript輕量級響應式lightbox插件。該Lightbox插件支持圖片，視頻，iframe等多種媒體。支持全屏，導航，縮放，下載等功能，還支持多種動畫過渡效果。lightgallery.js的特點還有：
- 完全響應式設計。
- 內置插件的模塊化體繫結構。
- 支持移動觸摸設備。
- 桌面設備中可以通過滑鼠拖拽來切換。
- 滑鼠雙擊可以查看原尺寸的大圖。
- 縮略圖帶動畫特效。
- 支持各種視頻。
- 支持20多種硬體加速的CSS3過渡動畫。
- 支持動態載入模式。
- 支持全屏模式。
- 支持圖片的縮放。
- 支持HTML5 history API。
- 響應式圖片。
- 支持HTML iframe。
- 同一個頁面支持多個實例。
- 智能載入圖片及代碼優化。
- 桌面設備支持鍵盤導航。
- 支持字體圖標。
安裝
可以通過npm和bower來安裝lightgallery.js插件。
| 1 2 |
bower install lightgallery.js --save
npm install lightgallery.js
|
使用方法
在頁面中引入lightgallery.css和lightgallery.min.js文件。如果你需要某項功能可以單獨引入相關文件，如全屏功能引入lg-fullscreen.min.js，縮略圖功能引入lg-thumbnail.min.js等。
| 1 2 3 4 5 |
<link rel="stylesheet" href="css/lightgallery.css">
<script src="js/lightgallery.min.js"></script>
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>
...
|
HTML結構
建議使用下麵的HTML結構來構建一個圖片畫廊。
| 1 2 3 4 5 6 7 8 9 |
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg">
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg">
</a>
...
</div>
|
你可以查看這裡來獲取其它HTML結構的使用方法。
初始化插件
在頁面底部通過下麵的方法來初始化該lightbox插件。
| 1 2 3 |
<script>
lightGallery(document.getElementById('lightgallery'));
</script>
|
配置參數
核心配置參數
| 參數 | 類型 | 預設值 | 描述 |
| mode | string | 'lg-slide' | 圖片過渡的動畫類型。可用的動畫有：'lg-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' | easing過渡動畫類型。 |
| speed | number | 600 | 過渡動畫的持續時間。單位毫秒。 |
| height | string | '100%' | 圖片畫廊的高度。 |
| width | string | '100%' | 圖片畫廊的寬度。 |
| addClass | string | '' | 為畫廊添加自定義的class。 |
| startClass | string | 'lg-start-zoom' | 畫廊的開始動畫類型。 |
| backdropDuration | number | 150 | Lightgallery backdrop transtion duration |
| hideBarsDelay | number | 6000 | 隱藏圖片畫廊控制按鈕的延遲時間，單位毫秒。 |
| useLeft | boolean | false | 強制lightgallery使用left屬性來代替transform。 |
| closable | boolean | true | 允許用戶點擊暗處關閉圖片畫廊。 |
| loop | boolean | true | 是否迴圈播放。 |
| escKey | boolean | true | 是否允許通過"Esc"鍵來關閉圖片畫廊。 |
| keyPress | boolean | true | 是否允許鍵盤導航。 |
| controls | boolean | true | 是否顯示前後導航按鈕。 |
| slideEndAnimatoin | bolean | true | 是否允許slideEnd 動畫。 |
| hideControlOnEnd | boolean | false | 如果設置為false，第一幅和最後一幅圖片不顯示前後導航按鈕。 |
| getCaptionFromTitleOrAlt | boolean | true | 從圖片的alt或title標簽獲取圖片描述信息。 |
| appendSubHtmlTo | string | '.lg-sub-html' | 指定添加sub-html：'.lg-sub-html' 或 '.lg-item'。 |
| subHtmlSelectorRelative | boolean | false | 如果使用"data-sub-html"選擇器作為當前項目的源，設置為true。 |
| preload | number | 1 | 預載入slider的數量。 |
| showAfterLoad | boolean | true | 是否在完全載入後顯示內容。 |
| selector | string | '' | 自定義選擇器來替代子元素。 |
| selectWithin | string | '' | By default selectror element is taken from only inside the gallery element. Instead of that you can tell lightgallery to select element within a specific |
| nextHtml | string | '' | Next按鈕的html標記。 |
| prevHtml | string | '' | Prev按鈕的html標記。 |
| index | number | 0 | 設置被立刻載入的圖片/視頻的索引。 |
| iframeMaxWidth | string | '100%' | 設置iframe的最大寬度。 |
| download | boolean | true | 是否使用下載按鈕。 |
| counter | boolean | true | 是否顯示圖片的總數和當前圖片的索引。 |
| appendCounterTo | string | '.lg-toolbar' | 指定被添加的計數器。 |
| swipeThreshold | number | 50 | 觸摸滑動的閾值。 |
| enableDrag | boolean | true | 在桌面設備是否允許滑鼠拖動。 |
| enableTouch | boolean | true | 是否允許移動觸摸。 |
| dynamic | boolean | false | 通過編程的方式動態調用插件。 |
| dynamicEl | array | [] | 代表畫廊元素的數組。 |
