A lightweight image view plugin

Demo Page
PPAP

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() Browser Support

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

npm i lightimage Yarn

yarn add lightimage Use

import Lightimage from 'lightimage' new Lightimage('#app').init() Attributes

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)' }) License

MIT ©jwchan1996