jquery照片墙可拖拽轮番特效插件

jquery照片墙可拖拽轮番特效插件

photopile.js是一款jquery照片墙插件。该jquery照片墙插件的特点是兼容主流浏览器,照片可以使用鼠标进行拖拽,支持图片进行轮播,支持移动触摸事件。

使用方法
在页面中引入jquery和jquery-ui.min.js和jquery.ui.touch-punch.min.js文件,以及插件文件photopile.css和photopile.js。

1
2
3
4
5
<link href="css/photopile.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script src="photopile.js"></script>

HTML结构
使用该jquery照片墙插件的基本HTML结构如下:

1
2
3
4
5
6
7
8
9
10
<div class="photopile-wrapper">
  <ul class="photopile">
    <li>
      <a href="PATH/TO/YOUR/FULLSIZE/IMAGE">
        <img src="PATH/TO/YOUR/THUMBNAIL/IMAGE" alt="Image description" ... />
      </a>
    </li>
    <!-- 在这里添加更多的图片 -->
  </div>
</div>

初始化插件
在页面DOM元素加载完毕之后,通过下面的方法来初始化该jquery照片墙插件。

1
2
3
4
PhotoPile({
  OPTION: VALUE,
  ...
}).scatter()

配置参数
该jquery照片墙插件的可用配置参数有:

缩略图参数:
numLayers:图片堆叠的层数。默认为5层。

thumbOverlap:图片重叠部分的尺寸,单位像素,默认50像素。

thumbRotation:最大旋转角度,默认为45deg。

thumbBorderWidth:图片的边框宽度,默认为2像素。

thumbBorderColor:图片的边框颜色,默认为白色。

thumbBorderHover:hover图片时边框的颜色,默认为'#EAEAEA'。

draggable:图片是可以进行拖拽,默认为true。

图片容器参数:

fadeDuration:图片淡入淡出的速度,默认为200毫秒。

pickupDuration:图片升起和下降的速度,默认为500毫秒。

photoZIndex:z-index属性,默认为100。

photoBorder:大图的边框宽度,默认为10像素。

photoBorderColor:大图的边框颜色,默认为白色。

showInfo:是否显示描述信息,默认为true。

自动播放:

autoplayGallery:图片是否自动轮播。默认为false。

autoplaySpeed:图片自动轮播的速度。默认为5000毫秒。

图片预加载:

loading:预加载loader的图片路径。默认为'images/loading.gif'。

文件信息:

    0

    发表评论