Google Photos Inspired Image Zoom & Pan Plugin - iv-viewer

A feature-rich, touch-enabled jQuery & Vanilla JavaScript image viewer plugin that provides zooming and panning functionalities for your images, inspired by Google Photo.

Note that the plugin (v2) now works as a Vanilla JavaScript plugin without any 3rd dependencies. For jQuery users, you're able to download the ImageViewer V1 here.

Table Of Contents:

• Installation
• As a jQuery plugin
• As a Vanilla JavaScript plugin

Features:

• Fullscreen mode: displays images in a fullscreen modal
• Image mode: zoom & pan the image inside itself.
• Container mode: allows you to switch between images just like a gallery.
• Mouse wheel to zoom in / out an image.
• Mouse drag to move an image within the viewport.
• Touch gestures supported.
• Allows to load high resolution image asynchronously.

Install & Download:

# NPM
$ npm install iv-viewer --save

How to use it (v1 jQuery):

1. To get started, include the jQuery ImageViewer plugin after you've included jQuery JavaScript library.

<link href="imageviewer.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="imageviewer.js"></script>

2. Attach the plugin to your image and done.

<img src="thumb.jpg" data-high-res-src="big.jpg" alt="Image Alt" class="demo">

$(function () {
  $('.demo').ImageViewer();
});

3. Show the zoomed image in a fullscreen modal instead.

$(function () {
  var viewer = ImageViewer();
  $('.demo').click(function () {
    var imgSrc = this.src,
    highResolutionImage = $(this).data('high-res-img');
    viewer.show(imgSrc, highResolutionImage);
  });
});

4. Create an zoomable & panable gallery where the users can switch between images by clicking the navigation links.

<div class="image-container"></div>
<img src="left.svg" class="prev"/>
<img src="right.svg"  class="next"/>
<div class="footer-info">
  <span class="current"></span>/<span class="total"></span>
</div>

var images = [{
    small : '1.jpg',
    big : '1_big.jpg'
},{
    small : '2.jpg',
    big : '2_big.jpg'
},{
    small : '3.jpg',
    big : '3_big.jpg'
},{
    small : '4.jpg',
    big : '4_big.jpg'
}];

var curImageIdx = 1,
    total = images.length;
var wrapper = $('#image-gallery'),
    curSpan = wrapper.find('.current');
var viewer = ImageViewer(wrapper.find('.image-container'));

// display total count
wrapper.find('.total').html(total);

function showImage(){
  var imgObj = images[curImageIdx - 1];
  viewer.load(imgObj.small, imgObj.big);
  curSpan.html(curImageIdx);
}

wrapper.find('.next').click(function(){
  curImageIdx++;
  if(curImageIdx > total) curImageIdx = 1;
  showImage();
});

wrapper.find('.prev').click(function(){
  curImageIdx--;
  if(curImageIdx < 0) curImageIdx = total;
  showImage();
});

//initially show image
showImage();

5. All configuration options.

$.fn.ImageViewer({

  // the initial zoom value of an image
  zoomValue: 100,

  // show/hide snap view
  snapView: true,

  // maximum percentage you can zoom an image
  maxZoom: 500,

  // wether to refresh the viewer on resize of window
  refreshOnResize: true,

  // wether to zoom in / out an image with mouse wheel
  zoomOnMouseWheel : true
  
});

6. API methods.

// To zoom viewer through code. 
// percentageValue : zoom value in percentage. 
// point (optional): Point {x, y} which would act as center of zoom. If not defined, it will take center of container as the zooming point.
zoom(zoomValue,point);

// Reset zoom to provided zoomValue through option
viewer.resetZoom();

// reefresh the viewer
viewer.refresh();

// Show the full screen viewer(Note: only available when plugin is initialized in full screen mode). 
// imgSrc : image source to display in viewer. 
// highResImg (optional) : A high resoultion image source of the same image. Its good when you have a lower quality image already loaded and you to quickly show image on viewer and simultaneously load better quality image. 
show(imgSrc, highResImg);

// Hide the full-screen viewer
// Note: only available when plugin is initialized in full screen mode
viewer.hide();

// Load an image or new image in viewer. Available on Full screen and Container mode. 
// imgSrc : image source to display in viewer. 
// highResImg (optional) : A high resoultion image source of the same image. Its good when you have a lower quality image already loaded and you to quickly show image on viewer and simultaneously load better quality image. load(imgSrc, highResImg);

// Destroy the plugin instance and unbind events. It returns null which should be assigned to viewer variable to completly free the memory.
viewer = viewer.destroy();

How to use it (v2 Vanilla JS):

1. Import the ImageViewer as an ES module.

import ImageViewer from 'iv-viewer';

2. Or load the compiled version in the document.

<link rel="stylesheet" href="/path/to/dist/iv-viewer.css" />
<script src="/path/to/dist/iv-viewer.js"></script>

3. Attach the plugin to your image and done.

<img src="thumb.jpg" data-high-res-src="big.jpg" alt="Image Alt" class="demo">

const image = document.querySelector('.demo');
const viewer = new ImageViewer(image, options);

4. Display an image in fullscreen mode.

const viewer = new FullScreenViewer(options);
viewer.show('thumb.jpg', 'big.jpg');

5. Display images in a gallery.

<div id="image-container"></div>

const container = document.querySelector('#image-container');
const viewer = new ImageViewer(container, options);

6. Possible options. See the Options section above.

7. API methods.

// load an image
viewer.load('image.png', 'hi-res-image.png');

// zoom an image
viewer.zoom(300, { x: 500, y: 500 });

// reset the image
viewer.resetZoom();

// refresh the image
viewer.refresh();

// destroy the plugin
viewer = viewer.destroy();

// hide the image in fullscreen mode
viewer.hide();

Changelog:

2021-06-17

• Update to v2.1.1

About Author:

Author: Sudhanshu Yadav

Website: http://ignitersworld.com/lab/imageViewer.html

---

This awesome jQuery plugin is developed by s-yadav. For more Advanced Usages, please check the demo page or visit the official website.