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'
。
该jquery照片墙插件的github地址为:https://github.com/bigbhowell/photopile-js
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!