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 的設定可以參考套件頁面說明。

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。