photopile.js是一个jQuery图片墙插件。该jQuery照片墙插件具有与主流浏览器兼容的特性，可以使用鼠标拖动照片，支持图片旋转，支持移动触摸事件。

使用方法

在页面中引入jquery和jquery-ui.min.js和jquery.ui.touch-punch.min.js文件，以及插件文件photopile.css和photopile.js。

<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>
		<!-- 在这里添加更多的图片 -->
	</ul>
</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’。
该jquery照片墙插件的github地址为：
源码来源：https://github.com/bigbhowell/photopile-js

在线预览 网盘下载