分享

一款简单实用的jQuery图片画廊插件

 WindySky 2016-08-11

 图片画廊

今天分享一个自己实现的jQuery 图片画廊插件。

看一下效果图:

360截图20150802102358254

点击图片时:

360截图20150802102415423

在线演示地址:http://www./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

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约