🌈 A lightweight image view plugin
Example
Intro
we can bind an element in the Lightimage
object, and all children of the current element like <img/>
can be viewed.
bind the element of #app
, we can scale view all children of #app
like <img/>
'#app'
bind the element of .content
, we can scale view all children of .content
like <img/>
'.content'
Browser Support
38+ ✔️ | 43+ ✔️ | 10+ ✔️ | 14+ ✔️ | 32+ ✔️ | 8+ ✔️ |
Install
CDN
NPM
npm i lightimage
Yarn
yarn add lightimage
Use
'#app'
Attributes
Attribute | Description | Type | Default |
---|---|---|---|
cursor | mouse style of hover image | string | zoom-in |
showAnimationDuration | transition time of show image | string | |
maskLayerBgColor | background color of mask layer | string | rgba(0, 0, 0, 0.8) |
showCloseBtn | whether to show the close button | boolean | false |
closeBtnHeight | the close button height | number | 48 |
closeBtnWidth | the close button width | number | 48 |
closeBtnColor | the close button color | string | #9C9C9C |
closeBtnBgColor | the close button background color | string | rgba(0, 0, 0, 0.2) |
we can custom params like this :
'#app'
License
MIT ©jwchan1996