/MPreview.mobile

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

Primary LanguageJavaScriptMIT LicenseMIT

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/