tubb / h5-imageviewer

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

H5 image viewer

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

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

• AlloyFinger

License

This content is released under the MIT License.

h5-imageviewer's Issues

在react中调用，图片消失时会报错，请问该如何解决？

bundle.js:1 Uncaught TypeError: Cannot read property 'childNodes' of undefined at pe (bundle.js:1) at multipointEndListener (bundle.js:1) at HTMLDivElement.multipointEnd (bundle.js:1) at HandlerAdmin.dispatch (alloy_finger.js:57) at AlloyFinger.end (alloy_finger.js:224) pe @ bundle.js:1 multipointEndListener @ bundle.js:1 multipointEnd @ bundle.js:1 HandlerAdmin.dispatch @ alloy_finger.js:57 end @ alloy_finger.js:224 Wave.js:31 image list viewer hide
在react中调用，图片消失时会报错，请问该如何解决？

showImgListViewer 的时候，如果defaultPageIndex不是第一张，进入后会有个切换的效果，我希望有个开关

showImgListViewer 的时候，如果defaultPageIndex不是第一张，进入后会有个切换的效果，我希望有个开关可以把切换的效果关闭，可以让我点开的时候可以直接定位到，现在比较急，有什么可以项目中快速处理的办法吗

来回点击图片多次，就会报错：Cannot read property 'childNodes' of undefined

bundle.js:1 Uncaught TypeError: Cannot read property 'childNodes' of undefined
at we (bundle.js:1)
at multipointEndListener (bundle.js:1)
at HTMLDivElement.multipointEnd (bundle.js:1)
at HandlerAdmin.dispatch (alloy_finger.js:57)
at AlloyFinger.end (alloy_finger.js:224)

bundle.js:1文件
error:
return G.childNodes[e].childNodes[0]}