lightGallery

輕量、模組化的燈箱畫廊套件。

一、安裝

1. 載入 CSS

我比較懶惰，直接載入包含 lightGallery 和所有插件樣式的 CSS。

<link type="text/css" rel="stylesheet" href="css/lightgallery-bundle.css" />

2. 載入 Javascript

載入基本的 lightgallery.min.js，如果要使用其他插件要另外載。

<script src="js/lightgallery.min.js"></script>

<script src="js/plugins/lg-thumbnail.umd.js"></script>
<script src="js/plugins/lg-zoom.umd.js"></script>

二、使用

1. HTML 寫法

<div id="lightgallery">
    <a href="img/img1.jpg" data-lg-size="1600-2400">
        <img alt="img1" src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg" data-lg-size="1024-800">
        <img alt="img2" src="img/thumb2.jpg" />
    </a>
    ...
</div>

2. 初始化

lightGallery(document.getElementById('lightgallery'), {
    plugins: [lgZoom, lgThumbnail],
    licenseKey: 'your_license_key',
    speed: 500,
    // ... other settings
});

參考文件

• lightGallery