lightGallery

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

一、安裝

1. 載入 CSS

我比較懶惰,直接載入包含 lightGallery 和所有插件樣式的 CSS。
  1. <link type="text/css" rel="stylesheet" href="css/lightgallery-bundle.css" />

2. 載入 Javascript

載入基本的 lightgallery.min.js,如果要使用其他插件要另外載。
  1. <script src="js/lightgallery.min.js"></script>
  2.  
  3. <script src="js/plugins/lg-thumbnail.umd.js"></script>
  4. <script src="js/plugins/lg-zoom.umd.js"></script>

二、使用

1. HTML 寫法

  1. <div id="lightgallery">
  2. <a href="img/img1.jpg" data-lg-size="1600-2400">
  3. <img alt="img1" src="img/thumb1.jpg" />
  4. </a>
  5. <a href="img/img2.jpg" data-lg-size="1024-800">
  6. <img alt="img2" src="img/thumb2.jpg" />
  7. </a>
  8. ...
  9. </div>

2. 初始化

  1. lightGallery(document.getElementById('lightgallery'), {
  2. plugins: [lgZoom, lgThumbnail],
  3. licenseKey: 'your_license_key',
  4. speed: 500,
  5. // ... other settings
  6. });
參考文件

留言