npm package: @hippie/gallery
Description: A gallery without dependencies
Author: flfwzgl
Latest version: 0.1.1

# Gallery

JavaScript 相册, 无任何依赖

### 特性

- 兼容移动端和 pc 端
- 高性能动画
- 图片预加载
- 基于事件

### 兼容性

| Edge | IE10~11(需引入 Promise) | Chrome 32+ | Firefox 29+ | Opera 19+ | Safari 9+ |
| :--: | :---------------------: | :--------: | :---------: | :-------: | :-------: |
|  ✔️  |           ✔️            |     ✔️     |     ✔️      |    ✔️     |    ✔️     |

### 用法

#### 安装

```
npm i -S @hippie/gallery
```

#### 基本用法

```
import Gallery from '@hippie/gallery';

const gallery = new Gallery(opts);
gallery.show(n);
```

- `opts` {Object}
  - `opts.list` {Array 必需} 所有大图 url 或 key 组成的数组
  - `opts.zIndex` {Number 可选} 相册的 `z-index`, 默认 `10000`
  - `opts.interceptor` {Function 可选} 加载大图之前执行的拦截器, 拦截器执行返回图片 url 或 `Promise` 实例

* `gallery` 实例对象
  - `hide` {Function}, 关闭相册
  - `show(n)` {Function}, `n` {Number 可选}, 打开相册并显示第 `n` 张图片(n 从 0 开始, 默认为 0)
  - `showImg(n)`, `n` {Number 可选}, 显示第 `n` 张图片

#### 默认按键绑定

- `esc` 关闭相册
- `←`、`↑` 切换上一张图
- `→`、`↓` 切换下一张图

#### 例子

```
// 返回一个相册实例
var gallery = new Gallery({
  list: [
    './static/park.jpg',
    './static/jiuzhaigou.jpg',
    './static/shenzhen.jpg'
    './static/up.jpg'
  ]
});

gallery.show(2); // 打开相册并显示第2(从0开始)张图片

// 关闭相册
gallery.hide();
```

#### 使用 interceptor

```
/**
 * 这个key可以是图片的key或其他映射规则, 当切换到一张图时,
 * 在加载图片之前, 它对应的key会被传入到拦截器中, 拦截器可以直接返回图片url
 * 也可以返回一个promise实例, 然后异步获取到图片 url 再将其 resolve
 */
const keyList = [
  '190jmknfdsa',
  'ioklmjasbfd',
  'vcznjkdsadw',
  'fdsavcdsebb',
  'fdsv3bdfsbe'
]

var gallery = new Gallery({
  list: keyList,
  interceptor: function (key) {
    return new Promise(function (resolve, reject) {
      $.get('/api/getImgUrlByKey?key=' + key, function (res) {
        if (res && res.code === 0) {
          resolve(res.data);
        }
      })
    });
  }
});
```

### 协议

MIT

---

# Gallery

**JavaScript gallery for PCs and mobiles, no dependencies**

### Features

- For PCs, and compatible with mobiles
- High performance animation
- Image-preloading
- Events-Based

### Compatibility

| Edge | IE10~11(with Promise polyfill) | Chrome 32+ | Firefox 29+ | Opera 19+ | Safari 9+ |
| :--: | :----------------------------: | :--------: | :---------: | :-------: | :-------: |
|  ✔️  |               ✔️               |     ✔️     |     ✔️      |    ✔️     |    ✔️     |

### Installation

```
npm i -S @hippie/gallery
```

### Basics

```
import Gallery from '@hippie/gallery';

const gallery = new Gallery(opts);
gallery.show(n);
```

- `opts` {Object}
  - `opts.list` {Array mandatory} Consist of all image urls or image keys
  - `opts.zIndex` {Number optional} The `z-index` of `gallery`, default `10000`
  - `opts.interceptor` {Function optional} The interceptor before loading a big image, expected to return an instance of Promise or a real image url.

* `gallery` instance
  - `hide` {Function} Close gallery
  - `show(n)` {Number optional} Open gallery and display the nth image, starting at 0, default 0
  - `showImg(n)`, `n` {Number optional} Display the nth image

#### Default binding

- `esc` close the gallery
- `←`、`↑` switch to the previous image
- `→`、`↓` switch to the next image

#### Examples

```
// return an instance of Gallery
var gallery = new Gallery({
  list: [
    './static/park.jpg',
    './static/jiuzhaigou.jpg',
    './static/shenzhen.jpg'
    './static/up.jpg'
  ]
});

gallery.show(2); // open the gallery and display the second image(starting at 0)

// close the gallery
gallery.hide();
```

#### Interceptor usage

```
/**
 * This key may be an image key or other mapping rules,
 * when switching to an image, before loading the image,
 * its corresponding key will be passed to the inteceptor,
 * the inteceptor may return an image url directly or return a Promise instance
 * which get the image url asynchrously and resolve it.
 */
const keyList = [
  '190jmknfdsa',
  'ioklmjasbfd',
  'vcznjkdsadw',
  'fdsavcdsebb',
  'fdsv3bdfsbe'
]

var gallery = new Gallery({
  list: keyList,
  interceptor: function (key) {
    return new Promise(function (resolve, reject) {
      $.get('/api/getImgUrlByKey?key=' + key, function (res) {
        if (res && res.code === 0) {
          resolve(res.data);
        }
      })
    });
  }
});
```

### License

MIT