漂亮的LightBox图片画廊插件开发

今天给大家带来的是LightBox图片画廊插件的实现方法，用jQuery制作出一款简洁、漂亮的图片画廊，下面我们先看一下实现的效果：

功能点如下：

1.点击小图片，弹出对应的大图片

2.每次点击小图或者点击切换按钮切换图片时，在加载图片时会有加载动画效果

3.每张大图片出来时，从屏幕上方以动画效果出来

4.加载时宽高各为屏幕宽高的一半，加载完成显示的图片大小为图片实际大小（这个效果也比较好看，由小到大的动画）

5.每张小图片对应的大图片尺寸不一，弹出的图片显示的高度和宽度也是变化的

6.鼠标悬浮在图片左侧或者右侧会有切换图片，点击即可切换图片

7.图片下方有图片描述和索引

8.点击黑色遮罩层即可关闭图片，点击在图片右下角的关闭按钮也可关闭图片

这是我们最终实现的效果图，点击小图片之后弹出的对应的大图，中间有过渡动画，效果非常好看。下面我们来看一下LightBox插件的实现方法

一、首先我们要引入jQuery，我这里用的是2.1.1版本的

<script src="js/jquery-2.1.1.js"></script>

二、引入好jQuery后，在我们显示小图片的地方加入以下HTML代码：

<h1>第一组图片</h1> <div> <img data-role="lightbox" data-source="Images/1-1.jpg" data-group="group-1" data-id="1" data-caption="风景名画" width="100" height="100" src="Images/1-1.jpg"/> <img data-role="lightbox" data-source="Images/1-2.jpg" data-group="group-1" data-id="2" data-caption="非常好看的图片" width="100" height="100" src="Images/1-2.jpg"/> <img data-role="lightbox" data-source="Images/1-3.jpg" data-group="group-1" data-id="3" data-caption="风景图鉴赏" width="100" height="100" src="Images/1-3.jpg"/> <img data-role="lightbox" data-source="Images/1-4.jpg" data-group="group-1" data-id="4" data-caption="名图赏析" width="100" height="100" src="Images/1-4.jpg"/> <img data-role="lightbox" data-source="Images/1-5.jpg" data-group="group-1" data-id="5" data-caption="图片之家" width="100" height="100" src="Images/1-5.jpg"/> <img data-role="lightbox" data-source="Images/1-6.jpg" data-group="group-1" data-id="6" data-caption="大家跟我来赏图" width="100" height="100" src="Images/1-6.jpg"/> </div> <h1>第二组图片</h1> <div> <img data-role="lightbox" data-source="Images/2-1.jpg" data-group="group-2" data-id="1" data-caption="美图" width="100" height="100" src="Images/2-1.jpg"/> <img data-role="lightbox" data-source="Images/2-2.jpg" data-group="group-2" data-id="2" data-caption="好图看不停" width="100" height="100" src="Images/2-2.jpg"/> <img data-role="lightbox" data-source="Images/2-3.jpg" data-group="group-2" data-id="3" data-caption="美图秀秀" width="100" height="100" src="Images/2-3.jpg"/> <img data-role="lightbox" data-source="Images/2-4.jpg" data-group="group-2" data-id="4" data-caption="世界超跑" width="100" height="100" src="Images/2-4.jpg"/> <img data-role="lightbox" data-source="Images/2-5.jpg" data-group="group-2" data-id="5" data-caption="豪车欣赏" width="100" height="100" src="Images/2-5.jpg"/> <img data-role="lightbox" data-source="Images/2-6.jpg" data-group="group-2" data-id="6" data-caption="世界名车" width="100" height="100" src="Images/2-6.jpg"/> </div> <h1>第三组图片</h1> <div> <img data-role="lightbox" data-source="Images/3-1.jpg" data-group="group-3" data-id="1" data-caption="美丽的花朵" width="100" height="100" src="Images/3-1.jpg"/> <img data-role="lightbox" data-source="Images/3-2.jpg" data-group="group-3" data-id="2" data-caption="苹果logo" width="100" height="100" src="Images/3-2.jpg"/> <img data-role="lightbox" data-source="Images/3-3.jpg" data-group="group-3" data-id="3" data-caption="山涧