Skip to content

Latest commit

 

History

History
94 lines (79 loc) · 4.73 KB

README.md

File metadata and controls

94 lines (79 loc) · 4.73 KB
Raw

H5 image viewer

Build Status Coverage Status node npm Maintainability

Image viewer for mobile browser, supported React/Vue/AngularJS.

Features

  • Supported rotate、pinch、move、swipe、scale and double tap gestures.
  • Page turning.
  • Supported landscape and portrait screen.
  • Supported React/Vue/AngularJS.
  • Scroll through long figure.

Demo

QRCODE
Image slider video
Portrait screen video
Landscape screen video

Install

You can install it via npm:

npm i h5-imageviewer

Or get it from CDN:

https://unpkg.com/[email protected]/umd/h5-imageviewer.js

Usage

Show single image viewer

import * as viewer from 'h5-imageviewer'
viewer.showViewer(imgObj, options)
// hide image viewer
viewer.hideImgViewer()

Show image list viewer

import * as viewer from 'h5-imageviewer'
viewer.showImgListViewer(imgObjList, options)
// hide image list viewer
viewer.hideImgListViewer()

Please check EXAMPLE1 or EXAMPLE2 for detail.

Apis

Show single image viewer(viewer.showViewer(imgObj, options))

Property Type Default Required Description
imgObj.src string yes img src attr (base64 also supported)
imgObj.alt string no img alt attr
options.errorPlh string no placeholder when image onerror
options.onViewerHideListener function() no listener for viewer hide
options.restDoms array no
options.imgMoveFactor number 1.5 no movement speed (imgMoveFactor * translateX or translateY)
options.imgMinScale number 1 no minimum scale of the image
options.imgMaxScale number 2 no maximum scale of the image
options.zIndex number 999 no the viewer z-index
options.viewerBg string #000000 no the viewer background
options.clickClosable boolean true no hide the viewer if click

Show image list viewer(viewer.showImgListViewer(imgObjList, options))

Property Type Default Required Description
imgObj.src string yes img src attr (base64 also supported)
imgObj.alt string no img alt attr
options.defaultPageIndex number 0 no default page index
options.errorPlh string no placeholder when image onerror
options.onViewerHideListener function() no listener for viewer hide
options.restDoms array no
options.imgMoveFactor number 1.5 no movement speed (imgMoveFactor * translateX or translateY)
options.imgMinScale number 1 no minimum scale of the image
options.imgMaxScale number 2 no maximum scale of the image
options.zIndex number 999 no the viewer z-index
options.viewerBg string #000000 no the viewer background
options.onPageChanged function(pageIndex) no the page changed listener
options.limit number 5 no how many pages will be kept offscreen in an idle state
options.pageThreshold number 0.1 no threshold of go to next or prev page (window.innerWidth * pageThreshold)
options.pageDampingFactor number 0.9 no damping factor
options.clickClosable boolean true no hide the viewer if click

Dependencies

License

This content is released under the MIT License.