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

| | | | | | | |:---:|:---:|:---:|:---:|:---:|:---:| | 38+ ✔️ | 43+ ✔️| 10+ ✔️| 14+ ✔️| 32+ ✔️| 8+ ✔️|

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

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

License

MIT ©jwchan1996