simple-lightbox- 好用方便的 jQuery lightnox 套件

simple-lightbox 是一個好用的 jQuery lightbox 套件，只要簡單引入就能使用。

使用方法是先讀入 js 及 css 檔案。

<link href="dist/simple-lightbox.min.css" rel="stylesheet" />
<!-- As A Vanilla JavaScript Plugin -->
<script src="dist/simple-lightbox.min.js"></script>
<!-- For legacy browsers -->
<script src="dist/simple-lightbox.legacy.min.js"></script>
<!-- As A jQuery Plugin -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="dist/simple-lightbox.jquery.min.js"></script>

HTML 設置的部分：

<div class="gallery">
  <a href="1.jpg" class="big" rel="rel1">
    <img src="thumb1.jpg" alt="" title="Image 1">
  </a>
  <a href="2.jpg" class="big" rel="rel1">
    <img src="thumb2.jpg" alt="" title="Image 2">
  </a>
</div>

注意 rel="rel1" 的參數是決定 lightbox 圖片群組的。

接著套用：

// As A Vanilla JavaScript Plugin
var gallery = new SimpleLightbox('.gallery a', {
   /* options */
});
// As A jQuery Plugin -->
var gallery = $('.gallery a').simpleLightbox({
  /* options */
});

options 的設定可以參考套件頁面說明。