juejin-image-viewer

掘金 图片查看插件。

安装

npm i -S juejin-image-viewer

使用

初始化

模块化环境

import JuejinImageViewer from 'juejin-image-viewer'
 
const imageViewer = new JuejinImageViewer(...)

浏览器直引

<script src="path/to/juejin-image-viewer.min.js"></script>

var imageViewer = new JuejinImageViewer(...)

构造参数

new JuejinImageViewer(container || containerList || selector, {
  targetFilter: elem => elem.nodeName === 'IMG' && elem.naturalWidth,
  urlGetter: elem => elem.getAttribute('src'),
  urlHandler: url => url,
  eventName: 'click',
  containerClassName: 'juejin-image-viewer__container',
  boxClassName: 'juejin-image-viewer__box',
  imageClassName: 'juejin-image-viewer__image',
  cursor: 'zoom-in',
  backgroundColor: '#fff',
  transitionDuration: 200,
  margin: 0,
  parent: null
})

方法

imageViewer.hide()
imageViewer.destroy()