移动端图片预览组件,支持手势缩放,双击放大,缩小
JavaScript HTML CSS
Latest commit 2b0d628 Jul 12, 2015 @webjyh Ver 1.0.0
Permalink
Failed to load latest commit information.
css Ver 1.0.0 Jul 12, 2015
images Ver 1.0.0 Jul 12, 2015
js Ver 1.0.0 Jul 12, 2015
LICENSE Initial commit Jul 12, 2015
README.md Ver 1.0.0 Jul 12, 2015
gulpfile.js Ver 1.0.0 Jul 12, 2015
index.html Ver 1.0.0 Jul 12, 2015

README.md

MPreview.js

移动端图片预览组件,支持手势缩放,双击放大,缩小

Demo 预览 (扫一扫)

图片左右切换 图片上下切换

插件说明

  1. 插件依赖 QuoJS,一款移动端的手势库。
  2. 兼容性 Android 4.4+, iOS 8.0+ 下的自带浏览器测试能过。
  3. 组件只适合移动端 PC版请移步 MPreview.PC

如何使用

<!-- Load MPreview CSS && JS -->
<link rel="stylesheet" type="text/css" href="css/MPreview.mobile.css"/>
<script type="text/javascript" src="js/quo.js"></script>
<script type="text/javascript" src="js/MPreview.mobile.js"></script>

<!-- 用于显示组件的容器 -->
<div class="overlay" id="overlay"></div>

<!-- 初始化 -->
<script type="text/javascript">
MPreview({
    data: ['xxxx/1.jpg', 'xxxx/2.jpg', 'xxxx/3.jpg'],
    wrap: '#overlay',
});
</script>

PS: 如果引用的是 `MPreview.mobile.min.js`,则无需在引用 QuoJS 手势库,因为 `MPreview.mobile.min.js` 打包时一并把 `QuoJS` 打包进来了。

API

MPreview({options});

options 说明

参数名 默认值 类型 参数说明
url null {String} 初始化插件时,用于Ajax获取图片数据的地址,如果参数 data 存在,则不发送Ajax请求,Ajax发送的为GET请求,Ajax需返回JSON格式。
data null {Array} 存放需要展示的图片数据,如果填写了此参数,Ajax请求则不会发送。data: ['111.jpg', '2222.jpg', '3333.jpg']
title 【浏览】 {String} 显示于组件头部的标题内容
params {} {Object} Ajax发送到服务器的数据。将自动转换为请求字符串格式。
wrap body {String} 指定在哪个容器下显示,支持 document.querySelector 的选择器。如:.class, element, #id, ul > li;
direction top {String} 指定图片按哪个方向切换,top 上下切换,left 左右切换。
placeholder images/placeholder.gif {String} 透明图片占位符的地址
init null {Function} 组件在初始化之前所调用的方法
close null {Function} 关闭组件时的回调方法
//Ajax 须返回如下JSON格式
{
    code: 1,
    imgs: [
        'xxxx.jpg',
        'xxxx.jpg',
        'xxxx.jpg'
    ]
}

销毁组件

var MP = MPreview({
    data: ['xxxx/1.jpg', 'xxxx/2.jpg', 'xxxx/3.jpg'],
    wrap: '#overlay',
});

//销毁
MP.destroy();

目录说明

MPreview/
├── css/
│   ├── normalize.css          (重置样式)
│   └── MPreview.mobile.css    (插件所需样式)
├── images/
│   ├── MPreview.mobile.loading.gif (加载图片等待动画)
│   └── placeholder.gif             (图片占位符)
├── js/
│   ├── quo.js                 (QuoJS 手势库)
│   ├── MPreview.mobile.js     (组件未压缩源码)
│   └── MPreview.mobile.min.js (组件压缩源码 已包含QuoJS))
├── gulpfile.js                (gulp 打包文件)
└── index.html                 (Demo展示)

PS: 在次强掉 MPreview.mobile.min.js 中已包含 QuoJS 手势库,由打包时候一起打包。如使用压缩版,则不需要在次引用 QuoJS 。

联系作者

Blog:http://webjyh.com

Weibo:http://weibo.com/webjyh/