移动优先的jQuery响应式图片画廊插件

jgallery是一款移动优先的jQuery响应式图片画廊插件。该图片画廊插件提供大量的参数和动画效果，可以灵活的组合这些参数制作出不同的图片画廊效果。它的特点有：

• 移动优先，支持移动触摸事件。
• 灵活，易于配置。
• 支持67种动画过渡效果。
• 可自由缩放尺寸。
• 支持CSS3和缩略图格式。
• 兼容所有现代浏览器（IE8及以下浏览器不支持）

安装

可以通过nmp来安装该图片画廊插件。

npm install jgallery                
              

在页面中引入需要的插件依赖文件。

<link rel="stylesheet" type="text/css" media="all" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/jgallery.min.css?v=1.5.3" />
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/jgallery.min.js?v=1.5.3"></script>                
              

如果需要支持移动触摸事件，需要引入touchswipe.js文件。

<script type="text/javascript" src="js/touchswipe.min.js"></script>                
              

使用方法

HTML结构

该图片画廊的最基本HTML结构如下，在一个<div>元素中放置你需要的图片。

<div id="gallery">
    <a href="images/large/1.jpg"><img src="images/thumbs/1.jpg" alt="Photo 1" /></a>
    <a href="images/large/2.jpg"><img src="images/thumbs/2.jpg" alt="Photo 2" /></a>
    <a href="images/large/3.jpg"><img src="images/thumbs/3.jpg" alt="Photo 3" /></a>
</div>                
              

初始化插件

在DOM元素加载完毕之后，可以通过下面的方法来初始化该图片画廊插件。

$( function() {
    $( '#gallery' ).jGallery();
} );                
              

配置参数

方法

• getOptions：返回当前对象参数。$( '#gallery' ).jGallery().getOptions();。
• getDefaults：返回默认参数。$( '#gallery' ).jGallery().getDefaults();。
• restoreDefaults：存储默认参数。$( '#gallery' ).jGallery().restoreDefaults();。
• getTransitions：返回动画过渡效果列表。$( '#gallery' ).jGallery().getTransitions();
• destroy：销毁图片画廊。$( '#gallery' ).jGallery().destroy();。