picture-viewer

JavaScript Module of Viewing Pciture.


Keywords
image, picture, viewer, javascript-modules, javascript-tools, picture-viewer
License
MIT
Install
npm install picture-viewer@0.2.1

Documentation

picture-viewer

JavaScript Module of Viewing Pciture.

demo

see the demo

how to get it

download

https://mebtte.github.io/picture-viewer/picture-viewer.js

npm

npm install --save picture-viewer

git

git clone https://github.com/mebtte/picture-viewer.git
cd picture-viewer
npm install
npm run build

usage

  1. append the picture-viewer.js to body.
  2. add the html class 'picture-viewer' to the img tag.
  3. click the img tag and show the picture viewer.
<body>
  <!-- show the picture of src -->
  <img class="picture-viewer" src="demo.jpg" alt="demo" /> 

  <!-- show the picture of data-origin-src -->
  <img class="picture-viewer" src="demo.min.jpg" data-origin-src="demo.jpg" alt="demo" /> 

  <!-- the script must to be in body -->
  <script src="picture-viewer.js"></script>
</body>

build your own picture-viewer

git clone https://github.com/mebtte/picture-viewer
cd picture-viewer
npm install
npm run dev

modify files of directory src and can see what you modify in browser.
and run npm run build to build your own picture-viewer.