基于jQuery的Lightbox2图片弹窗预览插件

    Lightbox2是Lightbox的升级版，Lightbox是优秀的基于jQuery的图片弹窗预览插件，我爱模板网在之前已经推荐过多次，这次整理个更全的api（见文末），带单个图片预览和多组图片前后切换预览，支持鼠标点击切换和键盘左右键进行切换，兼容市面上大多数的浏览器，自适应页面的宽高等。弹出、关闭有加载动画，还支持标题展示等等。

一、加载相关css和js

1. 下载最新的Lightbox2压缩包
2. 解压后找到js文件夹里的jquery-1.11.0.min.js、lightbox.min.js两个文件，加载它们，jQuery先加载：

   <script src="js/jquery-1.11.0.min.js"></script>
   <script src="js/lightbox.min.js"></script>

3. 再找到css文件夹的lightbox.css文件，再head中加载它：

   <link href="css/lightbox.css" rel="stylesheet" />

4. 找到img文件夹里的close.png、loading.gif、prev.png和next.png图片，在lightbox.css都被用到了，默认情况下, lightbox.css会在img中找它们，所以，要将这些图片放到自己的img文件夹下，并保证引入的路径。

二、设置html相关属性

• 给想要使用Lightbox2的图片包裹一个a链接，同时加上data-lightbox属性。这个属性的值要唯一，例如:

  <a href="img/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>

  注意: 添加data-title属性，可以在弹出的LightBox中，展示标题。
• 如果你想让一组图片能够上下切换，就像上面的第二个例子展示的效果，可以将这组图片的data-lightbox属性的值设置一样。例如：

  <a href="img/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
  <a href="img/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
  <a href="img/image-4.jpg" data-lightbox="roadtrip">Image #4</a>

更多关于lightbox2的使用方法，访问：Lightbox API
更多相关LightBox的插件，访问：Lightbox合集
另一款类似的插件fancybox，访问：fancybox