Lightweight and powerful javascript image preview plug-in, silky animation allows you to elegantly preview the images in your website. Out of the box, you don’t need extra configuration (by default) or change the page html code structure, you can easily enable the plugin in any type of website and upgrade your user experience
These functions are provided:
- Silky, interruptible transition animation
- Use mouse wheel to zoom picture
- Icon drag picture
- Previous & Next
- Shortcut key support
- Support for mobile gestures (zoom in with two fingers)
- Multi-language internationalization support
- Picture loading monitor
Other languages: English, 简体中文.
tips: For performance reasons, the mobile terminal does not do swiper
NPM
npm i img-previewer
# or
yarn add img-previewer
CDN
<script src="https://cdn.jsdelivr.net/npm/img-previewer@2.1.6/dist/img-previewer.min.js">script>
Enable
//js import ImgPreviewer from'img-previewer' //css import'img-previewer/dist/index.css' const imgPreviewer = new ImgPreviewer(css selector,{options...})
| Type | Description | Default Value | |
|---|---|---|---|
| fillRatio | number | The proportion of the image that fills the preview area | 0.9(90%) |
| dataUrlKey | string | The key of the image address value | src |
| imageZoom | object | Zoom image configuration | {min: 0.1,max: 5,step: 0.1} |
| style | object | Style configuration | {modalOpacity: 0.6,headerOpacity: 0,zIndex: 99} |
| i18n | object | tooltips International configuration | null |
| bubblingLevel | number | Bubble to detect whether the parent element of the image is hidden by the css style | 0 |
bubblingLevel Description
You should try to use this property when you notice an abnormal image hide animation. Because when the image or the parent element of the image is hidden by some CSS styles, it cannot be detected through the js api, so you need to pass in the correct upward lookup level according to the actual situation to help the plug-in complete the correct hiding animation. As shown below, the correct bubblingLevel is at least 3
for performance cons
