iOS Style Image Viewer In JavaScript – imagePreview

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


iOS Style Image Viewer In JavaScript – imagePreview


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


  • 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" />
new imagePreviewModule.ImagePreview({
    selector:'.gallery img'

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

let imgViewer =  new ImagePreview({
// then show an image;

4. Destroy the instance.


You Might Be Interested In:

Leave a Reply