@hankc/photos

预览http://www.hankc.name/demo/photos.html

功能

在网页内弹出浮层多张预览图片, 可旋转，放大，缩放浮层。

:rocket: 使用者指南

通过npm下载安装代码

$ npm install --save photos

如果你是node环境

var base = require('@hankc/photos');

如果你是webpack等环境

import base from '@hankc/photos';

如果你是requirejs环境

requirejs(['node_modules/@hankc/photos/dist/index.aio.js'], function (base) {
    // xxx
})

如果你是浏览器环境

<script src="node_modules/@hankc/photos/dist/index.aio.js"></script>

使用

// 通过浏览器直接引入index.aio.js 会在window上挂载 HcPhotos对象

// 预览一张图片
var photos = new HcPhotos("src/to/img");
// 或者
// var photos = HcPhotos("src/to/img");

// 可以通过js调用close方法主动关闭
photos.close();

多张图片

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"]);

事件监听

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) |

例子

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: 贡献者指南

首次运行需要先安装依赖

$ npm install

一键打包生成生产代码

$ npm run build

运行单元测试:

$ npm test