🌈 A lightweight image view plugin

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://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+ ✔️

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