lightimage v1.0.0

Example

Demo Page
PPAP

Intro

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://catbox.moe/pictures/qts/1512072270390.png">
  <div class="content">
    <img src="https://files.catbox.moe/jmai6s.png">
    <img src="https://files.catbox.moe/uh4owu.jpg">
    <img src="https://files.catbox.moe/bdo5nr.jpg">
  </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

Install

CDN

<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