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 | | 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 |

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 | | 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 |

Dependencies

• AlloyFinger

License

This content is released under the MIT License.