H5-imageviewer NPM

H5 image viewer

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

You can install it via npm:

npm i h5-imageviewer

Or get it from CDN:

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.

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		the attach dom array
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

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		the attach dom array
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