iOS Style Image Viewer In JavaScript – imagePreview

Category: Image , Javascript | February 23, 2021
Author:daxiazilong
Views Total:556 views
Official Page:Go to website
Last Update:February 23, 2021
License:MIT

Preview:

iOS Style Image Viewer In JavaScript – imagePreview

Description:

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();

You Might Be Interested In:


Leave a Reply