标签：
图片画廊
今天分享一个自己实现的jQuery 图片画廊插件。
看一下效果图：
点击图片时：
在线演示地址：http://www.jr93.top/photoGallery/photoGallery.html
使用
使用也是很简单，代码如下：
<div id="photoGallery-container"> <img class="photoGallery" data-src="img/1-1.jpg" src="img/1-1.jpg" data-id="pic_1" data-desc="图片1"> <img class="photoGallery" data-src="img/1-2.jpg" src="img/1-2.jpg" data-id="pic_2" data-desc="图片2"> <img class="photoGallery" data-src="img/1-3.jpg" src="img/1-3.jpg" data-id="pic_3" data-desc="图片3"> <img class="photoGallery" data-src="img/1-4.jpg" src="img/1-4.jpg" data-id="pic_4" data-desc="图片4"> <img class="photoGallery" data-src="img/1-5.jpg" src="img/1-5.jpg" data-id="pic_5" data-desc="图片5"> <img class="photoGallery" data-src="img/1-6.jpg" src="img/1-6.jpg" data-id="pic_6" data-desc="图片6"> <img class="photoGallery" data-src="img/1-7.jpg" src="img/1-7.jpg" data-id="pic_7" data-desc="图片7"> <img class="photoGallery" data-src="img/1-8.jpg" src="img/1-8.jpg" data-id="pic_8" data-desc="图片8"> </div>
其中id为photoGallery-container的容器内存放自己想要展示的图片组，每个img都有一个.photoGallery的类和三个自定义的data-属性，分别是：
.photoGallery ： 定义缩略图的样式，标识此图片是展示图片之一
data-src : 定义缩略图对应大图的路径
data-id : 定义图片的id
data-desc : 定义图片的描述
所以，这要满足以上四个很简单的条件，那么就能很轻松的使用了（PS：IE6不兼容）
github下载地址：https://github.com/JR93/photoGallery
若需转载，请注明出处，谢谢！
标签：
原文地址：http://www.cnblogs.com/jr1993/p/4695670.html
