图片/图形
Photopile 照片墙jQuery特效插件
PetitQ
photopile.js 是一款 jquery 照片墙插件。该 jquery 照片墙插件的特点是兼容主流浏览器，照片可以使用鼠标进行拖拽，支持图片进行轮播，支持移动触摸事件。
使用方法
在页面中引入 jquery 和 jquery-ui.min.js 和 jquery.ui.touch-punch.min.js 文件，以及插件文件 photopile.css 和 photopile.js。
也想出现在这里？联系我们吧
<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 结构如下：
<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 照片墙插件。
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'
Github 地址：https://github.com/bigbhowell/photopile-js
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
