Lightbox特效,即燈箱特效，類似於相簿預覽的效果，說得直白一些就是滑鼠點選圖片，這個圖片會浮起來全屏顯示。這個是在網頁開發中非常常見的一種特效。這種特效在網上有比較多的外掛可以使用，在PC端中有lokesh寫的lightbox2外掛，在移動端中有PhotoSwipe，MagnificPopup等等。下面我就來介紹一種開發者可以根據自身的需求，高度定製自己的lightbox特效的外掛——imagelightbox.js。
這個外掛與別的外掛不同的是，這個外掛簡單，預設情況下，沒有字幕，導航按鈕或背景封面，因此開發者可以根據自身的需要來安裝這個外掛所提供的規範來改造它。特別討厭一些lightbox外掛，自身帶有複雜的樣式和功能，開發者很難根據自身的需要來使用它。這個外掛還有一個非常吸引我的特點，就是非常的小，適合在移動端中使用。
當然啦，使用這個外掛的方法也非常的簡單

HTML

<a href="./aa.png">
    <img src="./aa.png" />
</a>

CSS

沒有預設的CSS， 一切都取決於你的需求。 這裡推薦使用的預設的CSS樣式如下：

#imagelightbox {
    position: fixed;
    z-index: 9999;
    -ms-touch-action: none;
    touch-action: none;
}

如果你不加這段樣式，也不會影響到lightbox的功能。touch-action: none 是從元素中刪除預設的觸控操作。

Javascript

<script src="jquery.js"></script>
<script src="imagelightbox.js"></script>
<script>
    $( function()
    {
        $( 'a' ).imageLightbox();
    });
</script>

就這樣，一個最簡單的lightbox特效就實現了。
最後我告訴大家這個外掛的官方網站是imagelightbox.js 。大家也可以進入這個網站多學習學習。