iOS Style Image Viewer In JavaScript

image-preview(The most fluent & The most comfortable)

front end image preview for mobile-web application.

features:

1. most of operation is supported by gensture.
2. rotate and zoom image.

How to use it:

install:

• usage for different module-sysetem:
• The release/image-preview directory is built for different module-system , include AMD,CommonJS,ES6,UMD,IIFE. You can choose one adapt to your project.

example

click here .

import

• script (in iife or umd module system,use namespace imagePreviewModule):

  <script src="js/image-preview-iife.js">
  <script>
    new imagePreviewModule.ImagePreview({
      // something same with below usage
    })
  </script>
  

• esmodule:

   import {ImagePreview} from 'js/image-preview-esm.js'
  

usage:

html:

  <div class="imageWraper">
    <img data-src="/images/IMG_0512.JPG" src="/images/IMG_0512.JPG">
    <img data-src="/images/main_body3.png" src="/images/main_body3.png">
  </div>

javascript:

//just
let imgObj = new ImagePreview({
  selector:`.imageWraper img`
})
//or mvvm project

let imgObj =  new ImagePreview({
  curImg:'imgsrc',
  imgs:[
    'imgsrc',
    'imgsrc',
    'imgsrc'
  ]
})
//then show n-th picture,use
imgObj.show(n);

// distroy instance.  remove HTML generated by this ImagePreview instance
// for better performance, then you can set imgObj = null;
imgObj.distory();

communicate

yon can join qq-group 977121370 and chat with me.

Download Details:

Author: daxiazilong

Source Code: https://github.com/daxiazilong/imagePreview

#javascript