npm package: @hankc/photos
Description: 原生js PC端图片预览
Author: hankchang
Latest version: 1.0.6

# @hankc/photos

## [预览](http://www.hankc.name/demo/photos.html)http://www.hankc.name/demo/photos.html

## 功能

在网页内弹出浮层多张预览图片, 可旋转，放大，缩放浮层。

## :rocket: 使用者指南

通过npm下载安装代码

```bash
$ npm install --save photos
```

如果你是node环境

```js
var base = require('@hankc/photos');
```

如果你是webpack等环境

```js
import base from '@hankc/photos';
```

如果你是requirejs环境

```js
requirejs(['node_modules/@hankc/photos/dist/index.aio.js'], function (base) {
    // xxx
})
```

如果你是浏览器环境

```html
<script src="node_modules/@hankc/photos/dist/index.aio.js"></script>
```

### 使用

```js
// 通过浏览器直接引入index.aio.js 会在window上挂载 HcPhotos对象

// 预览一张图片
var photos = new HcPhotos("src/to/img");
// 或者
// var photos = HcPhotos("src/to/img");

// 可以通过js调用close方法主动关闭
photos.close();
```

#### 多张图片

```js
var photos = new HcPhotos(["src/to/img", "src/to/img2"]);
// 参数也可以是对象
{
    src: "src/to/img",
    alt: "图片alt 用于 img[alt] 和 顶部标题"
}

var photos = new HcPhotos([{
    src: "src/to/img",
    alt: "图片标题"
}, "src/to/img2"]);
```

#### 事件监听

```js
var photos = new HcPhotos({
    data: [{
            src: "src/to/img",
            alt: "图片标题"
        }, "src/to/img2"
    ],
    /**
     * 图片的onerror事件
     * @param {string| {src: string, alt: string}} dataItem 当前加载完成的图片数据
     * @param {number} index 当前展示的图片索引
     * @param {Event} event 图片加载的完成事件对象
     */
    onLoad(dataItem, index, event) {
        console.log("当前的图片数据", dataItem);
        console.log("当前的图片索引", index);
        console.log("图片加载的完成事件对象", event);
    },
    /**
     * 图片的onerror事件
     * @param {string| {src: string, alt: string}} dataItem 当前加载失败的图片数据
     * @param {number} index 当前展示的图片索引
     * @param {Event} event 图片加载的错误对象
     */
    onError(dataItem, index, event) {
        console.log("当前的图片数据", dataItem);
        console.log("当前的图片索引", index);
        console.log("图片错误的事件对象", event);
    },
    /**
     * 图片的onerror事件
     * @param {string| {src: string, alt: string}} dataItem 当前变更后的图片数据
     * @param {number} index 当前展示的图片索引
     * @param {HTMLElement} dom 图片容器dom
     */
    onChange(dataItem, index, dom) {
        console.log("当前的图片数据", dataItem);
        console.log("当前的图片索引", index);
        console.log("图片容器dom", dom);
    },
});
```

### 参数

可以通过 `HcPhotos.defaultAlt` 配置默认的图片alt， 顶部标题

#### 构造函数参数

> 只接受一个参数

##### 当参数是String时, 传入的是图片地址

##### 当参数是Array时, 传入的是图片地址数组

##### 当参数是Object时

| 属性名 | 说明 | 格式 | 默认值 |
| ---- | ---- | ---- |  ---- |
| start | 开始的索引 | number | 0 |
| zoomFactor | 缩放系数 | number | 0.2 |
| data | 图片数据 | string or {src: string, alt: string} | 必填 |


| 方法名 | 说明 | 参数 |
| ---- | ---- | ---- | 
| onLoad | 展示图片加载完成 | (data: ImgData, index: number, event: Event) |
| onError | 展示图片加载失败 | (data: ImgData, index: number, event: Event) | 
| onChange | 切换图片 | (data: ImgData, index: number, dom: HTMLElement) |

例子

```js
HcPhotos.defaultAlt = "图片标题";
// 参数是String
new HcPhotos("src/to/img"]);
// 参数是Array
new HcPhotos(["src/to/img", "src/to/img2"]);
// 参数是Object
new HcPhotos({
    start: 1,
    zoomFactor: 0.5,
    data: ["src/to/img", "src/to/img2"],
    onLoad(dataItem, index, event) {},
    onError(dataItem, index, event) {},
    onChange(dataItem, index, dom) {},
});
```

## :kissing_heart: 贡献者指南
首次运行需要先安装依赖

```bash
$ npm install
```

一键打包生成生产代码

```bash
$ npm run build
```

运行单元测试:

```bash
$ npm test
```