<commit_before><a href="https://www.npmjs.com/package/image-viewer-gallery"><img src="https://img.shields.io/npm/v/image-viewer-gallery.svg" alt="Version"></a>

# ImageViewer
ImageViewer是一个用于web移动端的图片预览组件。

## demo
请使用手机打开链接查看，PC端请打开控制台模拟移动设备
[demo](http://freeui.org/imageViewer2/)

## 引入方式
### 常规script标签引入
将本项目dist文件夹中的`imageViewer.min.js`文件放到目标项目或者CDN，通过script标签加载，访问挂载到全局window的ImageViewer类实例化使用
### npm install
``` bash
npm install image-viewer-gallery --save-dev
```
如果目标项目本身就是基于webpack + babel开发的话，可以直接引入`import ImageViewer from 'image-viewer-gallery'`，需要注意的是确保配置好stylus-loader。

如果目标项目没有配置babel编译或者也不是用webpack构建的，可以直接require引入dist文件夹下的`imageViewer.common.js`文件。

## 使用示例
ImageViewer是这个图片预览组件的核心类，实例化第一个入参是图片数组（必传），第二个为一些可选的选项参数对象。
选项参数包括：
- `container`：一个简单的选择器，代表该图片预览组件所应该插入到的地方(参数可选，默认为body元素);
- `enableScale`：是否启用图片缩放功能(参数可选，默认为true);
- `enableTapClose`：是否允许单击关闭图片预览(参数可选，默认为false);
- `fadeInFn`：是否开启图片预览渐变打开效果(参数可选);
- `fadeOutFn`：是否开启图片预览渐变关闭效果(参数可选);
- `startIndex`：开始预览的第一张图片所在数组下标，从0开始(参数可选，默认为0);
- `headerRender`：头部渲染函数，返回一个html字符串并且会被显示在图片预览界面上方，用于自定义头部显示(参数可选);
- `footerRender`：尾部渲染函数，返回一个html字符串并且会被显示在图片预览界面下方，用于自定义尾部显示(参数可选);
- `beforeSwipe`：图片开始滑动时的回调函数，入参为当前显示的图片的下标(参数可选);
- `afterSwipe`：图片滑动结束并且是切换图片时的回调函数，入参为当前显示的图片的下标(参数可选);
- `swipeFirstRight`：当前图片是第一张并且向右滑动结束时的回调函数，第一个入参为当前ImageViewer实例，第二个入参是滑动的X轴距离(参数可选);
- `swipeLastLeft`：当前图片是最后一张并且向左滑动结束时的回调函数，第一个入参为当前ImageViewer实例，第二个入参是滑动的X轴距离(参数可选);

`fadeInFn`和`fadeOutFn`选项的函数，返回值可以是一个元素节点对象，也可以是一个结构为`{width,height,top,left}`的对象值，还可以什么都不返回。

headerRender和footerRender返回的html字符串，可以为对应的标签添加上`number-current`和`number-total`样式类，该组件
会自动寻找拥有这两个样式类的标签，并且在图片滑动时添加一些数据，`number-current`样式类对应的是当前图片所在的数组下标，
`number-total`样式类对应的是图片总数。
```javascript
document.addEventListener('DOMContentLoaded', function () {
    function getElement(index) {
        // 可以不返回任何一个值，仅仅传入一个空函数指明要开启渐变动画
        return document.getElementById('img' + (index + 1));
    }

    // 图片对象说明:
    // thumbnail: 缩略图的链接(非必传)
    // url: 原图的链接(必传)
    var images = [
        {url: 'images/2.jpg'},
        {thumbnail: 'thumbnails/3.jpg', url: 'images/3.jpg'},
        {thumbnail: 'thumbnails/4.jpg', url: 'images/4.jpg'},
        {thumbnail: 'thumbnails/5.jpg', url: 'images/5.jpg'},
        {thumbnail: 'thumbnails/6.jpg', url: 'images/6.jpg'},
        {thumbnail: 'thumbnails/7.jpg', url: 'images/7.jpg'},
        {url: 'images/8.jpg'}
    ];
    window.imageViewer = new ImageViewer(images, {
        container: 'body',
        enableScale: true,
        enableTapClose: true,
        startIndex: 0,
        fadeInFn: getElement,
        fadeOutFn: getElement,
        headerRender: function () {<commit_msg>update readme :memo:<commit_after><a href="https://www.npmjs.com/package/image-viewer-gallery"><img src="https://img.shields.io/npm/v/image-viewer-gallery.svg" alt="Version"></a>

# ImageViewer
ImageViewer是一个用于web移动端的图片预览组件。

## demo
请使用手机打开链接查看，PC端请打开控制台模拟移动设备
[demo](http://freeui.org/imageViewer2/)

## 引入方式
### 常规script标签引入
将本项目dist文件夹中的`imageViewer.min.js`文件放到目标项目或者CDN，通过script标签加载，访问挂载到全局window的ImageViewer类实例化使用
### npm install
``` bash
npm install image-viewer-gallery --save-dev
```
如果目标项目本身就是基于webpack + babel开发的话，可以直接引入`import ImageViewer from 'image-viewer-gallery'`，需要注意的是确保配置好stylus-loader。

如果目标项目没有配置babel编译或者也不是用webpack构建的，可以直接require引入dist文件夹下的`imageViewer.common.js`文件。

## 使用示例
ImageViewer是这个图片预览组件的核心类，实例化第一个入参是图片数组（必传），第二个为一些可选的选项参数对象。
选项参数包括：
- `container`：一个简单的选择器，代表该图片预览组件所应该插入到的地方(参数可选，默认为body元素);
- `enableScale`：是否启用图片缩放功能(参数可选，默认为true);
- `enableTapClose`：是否允许单击关闭图片预览(参数可选，默认为false);
- `fadeInFn`：是否开启图片预览渐变打开效果(参数可选);
- `fadeOutFn`：是否开启图片预览渐变关闭效果(参数可选);
- `startIndex`：开始预览的第一张图片所在数组下标，从0开始(参数可选，默认为0);
- `headerRender`：头部渲染函数，返回一个html字符串并且会被显示在图片预览界面上方，用于自定义头部显示(参数可选);
- `footerRender`：尾部渲染函数，返回一个html字符串并且会被显示在图片预览界面下方，用于自定义尾部显示(参数可选);
- `beforeSwipe`：图片开始滑动时的回调函数，入参为当前显示的图片的下标(参数可选);
- `afterSwipe`：图片滑动结束并且是切换图片时的回调函数，入参为当前显示的图片的下标(参数可选);
- `swipeFirstRight`：当前图片是第一张并且向右滑动结束时的回调函数，第一个入参为当前ImageViewer实例，第二个入参是滑动的X轴距离(参数可选);
- `swipeLastLeft`：当前图片是最后一张并且向左滑动结束时的回调函数，第一个入参为当前ImageViewer实例，第二个入参是滑动的X轴距离(参数可选);

`fadeInFn`和`fadeOutFn`选项的函数，返回值可以是一个元素节点对象，也可以是一个结构为`{width,height,top,left}`的对象值，还可以什么都不返回。

headerRender和footerRender返回的html字符串，可以为对应的标签添加上`number-current`和`number-total`样式类，该组件
会自动寻找拥有这两个样式类的标签，并且在图片滑动时添加一些数据，`number-current`样式类对应的是当前图片所在的数组下标，
`number-total`样式类对应的是图片总数。
```javascript
document.addEventListener('DOMContentLoaded', function () {
    function getElement(index) {
        // 可以不返回任何一个值，仅仅传入一个空函数指明要开启渐变动画
        return document.getElementById('img' + (index + 1));
    }

    // 图片对象说明:
    // thumbnail: 缩略图的链接(非必传)
    // url: 原图的链接(必传)
    var images = [
        {url: 'thumbnails/2.jpg'},
        {thumbnail: 'thumbnails/3.jpg', url: 'images/3.jpg'},
        {thumbnail: 'thumbnails/4.jpg', url: 'images/4.jpg'},
        {thumbnail: 'thumbnails/5.jpg', url: 'images/5.jpg'},
        {thumbnail: 'thumbnails/6.jpg', url: 'images/6.jpg'},
        {thumbnail: 'thumbnails/7.jpg', url: 'images/7.jpg'},
        {url: 'thumbnails/8.jpg'}
    ];
    window.imageViewer = new ImageViewer(images, {
        container: 'body',
        enableScale: true,
        enableTapClose: true,
        startIndex: 0,
        fadeInFn: getElement,
        fadeOutFn: getElement,
        headerRender: function () {
{'fraction_non_alphanumeric': 0.14702011656326378, 'fraction_numerical': 0.006392178981011468, 'mean_word_length': 5.725663716814159, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 4, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2381016', 'n_tokens_mistral': 2979, 'n_tokens_neox': 3298, 'n_words': 206}