人靠衣装,机靠壳装

photopile可拖动改变位置照片堆叠点击查看插件

2018-06-08 16:29 发布

00
admin
湖南省 长沙市
  • 粉丝3

  • 关注0

  • 动态2

photopile照片堆叠点击查看插件_niuqiqi081616.jpg

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="images/fullsize/01.jpg">
          <img src="images/thumbs/01.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
        </a>
      </li>
      <li>
        <a href="images/fullsize/02.jpg">
          <img src="images/thumbs/02.jpg" alt="Building Atlanta, Georgia" width="133" height="100" />
        </a>
      </li>
      <li>
        <a href="images/fullsize/03.jpg">
          <img src="images/thumbs/03.jpg" alt="Building Atlanta, Georgia" width="133" height="100" />
        </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'


github地址为:https://github.com/bigbhowell/photopile-js

授权方式:共享版

适合环境: Chrome/Firefox/Opera/Safari/IE9+

猜你喜欢
更多发现
子导航JS代码
招联好期贷