lightgallery 是可以是一個讓網站快速實現幻燈片的插件，而且套件使用方法很單純容易上手。

版本選擇

目前最新的版本為version2，多了瀑布流的功能。但是基礎的幻燈片功能version1也很夠用了，所以這篇文章主要討論的範圍皆為version1。

tip

lightgallery 需要放css跟js兩個檔案，樣式的部分先用原生的css，之後再自己寫css覆蓋掉會快很多。 cdnjs連結

基本設定

首先先設定最基礎的HTML架構及JS設定:

標準架構

<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>

$(document).ready(function() {
  $("#lightgallery").lightGallery(); // 一個id只能套用一組幻燈片，如果一個頁面有多個幻燈片需要用不同的id
});

需要注意的是HTML的部分，官方的標準架構必須是 div > a > img ，如果用其他的排列方式會無法作用。

如果想要套自己的排版必須要加上 data-src="" (圖片連結) data-poster="" (影片連結) 才會執行

自訂架構

<div class="row" id="lightgallery">
  <div class="col-4" data-src="./image/info_001.jpg"> 
    <div class="card">
      <div class="picture">
        <img src="./image/info_001.jpg">
      </div>
    </div>
  </div>
</div>

如果想要新增功能 必須要自己建立一個function

$(document).ready(function() {
  initlightGallery();
});

function initlightGallery() {
  $("#lightgallery").lightGallery({
    autoplayControls: false,
    share: false,
    zoom: false,
    fullScreen: false,
    download: false,
    showThumbByDefault: false
  });
};

進階設定

官方還提供了轉場效果及速率調整，也提供不滿版的選擇，可以自行去官方文件了解用法。因為我沒有用過所以就先不寫在這裡。

參數設定

參數請參考官方文件，這邊提供幾個我覺得常用的參數:

參數	預設值	用途
autoplayControls	true	可選擇是否出現自動播放的按鈕
share	true	可選擇是否出現分享按鈕
zoom	true	可選擇是否出現放大縮小按鈕
download	true	可選擇是否出現下載按鈕
showThumbByDefault	true	是否一開始就顯示預覽來源
exThumbImage	false	幻燈片內的預覽小圖來源，如果有修改過架構就必須加上這個參數，否則程式會抓不到圖片，一般來說設 data-src 抓一樣的圖即可