🌈 A lightweight image view plugin
we can bind an element in the Lightimage object, and all children of the current element like <img/> can be viewed.
<div id="app">
<img src="https://i.loli.net/2020/10/26/HnegmF9uy6Nt7So.png" style="width: 250px;" alt="">
<img src="https://i.loli.net/2020/10/26/OMrAoaZmc7hn43k.png" style="width: 266px;" alt="">
<img src="https://i.loli.net/2020/10/26/zeoMxD6Ak75Qy8h.png" style="width: 250px;" alt="">
<div class="content">
<img src="https://i.loli.net/2020/10/26/TxPSiCqUX1sLmly.png" style="height: 266px;" alt="">
<img src="https://i.loli.net/2020/10/26/OzQPweNoFBuv3bl.jpg" style="width: 266px;" alt="">
<img src="https://i.loli.net/2020/10/26/bUvmgckjsAiloFh.png" style="width: 266px;" alt="">
</div>
</div>bind the element of #app, we can scale view all children of #app like <img/>
new Lightimage('#app').init()bind the element of .content, we can scale view all children of .content like <img/>
new Lightimage('.content').init() |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 38+ ✔️ | 43+ ✔️ | 10+ ✔️ | 14+ ✔️ | 32+ ✔️ | 8+ ✔️ |
<script src="https://cdn.jsdelivr.net/npm/lightimage/dist/lightimage.min.js"></script>
<script type="text/javascript">
new Lightimage('#app').init()
</script>npm i lightimageyarn add lightimageimport Lightimage from 'lightimage'
new Lightimage('#app').init()| 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 :
new Lightimage('#app').init({
cursor: 'zoom-in',
showAnimationDuration: '0.8s',
maskLayerBindClose: true,
maskLayerBgColor: 'rgba(0, 0, 0, 0.9)',
showCloseBtn: true,
closeBtnHeight: 48,
closeBtnWidth: 48,
closeBtnColor: '#9c9c9c',
closeBtnBgColor: 'rgba(0, 0, 0, 0)'
})MIT ©jwchan1996