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.