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