iOS Style Image Viewer In JavaScript – imagePreview

imagePreview is an iOS style, Mobil-first, super smooth image viewer written in JavaScript.

Features:

• Zoom in/out with fingers.
• Allows you to rotate images.
• Switch between images with swipe.

How to use it:

1. Download and import the imagePreview JavaScript library into the document.

<script src="./release/image-preview/image-preview-iife.js"></script>

// OR as an ES module
import {ImagePreview} from './release/image-preview/image-preview-esm.js'

2. Initialize the ImagePreview on your images and done.

<div class="gallery">
  <img data-src="large.jpg" src="small.jpg" alt="Image 1" />
  <img data-src="large.jpg" src="small.jpg" alt="Image 2" />
  <img data-src="large.jpg" src="small.jpg" alt="Image 3" />
  ...
</div>

new imagePreviewModule.ImagePreview({
    selector:'.gallery img'
})

3. Or add images to the image viewer via JavaScript:

let imgViewer =  new ImagePreview({
    curImg:'current.jpg',
    imgs:[
      '1.jpg',
      '2.jpg',
      '3.jpg'
    ]
})
// then show an image
imgViewer.show(1);

4. Destroy the instance.

imgViewer.destroy();