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

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