Image viewer for mobile browser, supported React/Vue/AngularJS.
- 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.
Image slider video
Portrait screen video
Landscape screen video
You can install it via npm:
npm i h5-imageviewerOr get it from CDN:
https://unpkg.com/h5-imageviewer@0.7.8/umd/h5-imageviewer.js
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 | ||
| 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 | ||
| 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 |
This content is released under the MIT License.