一个很好用的移动端Lightbox特效插件（一）

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 。大家也可以进入这个网站多学习学习。