Google Photos Inspired Image Zoom & Pan Plugin - ImageViewer

Google Photos Inspired Image Zoom & Pan Plugin - ImageViewer
File Size: 51.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A feature-rich, touch-enabled jQuery image viewer plugin which provides zooming and panning functionality for your images, inspired by Google Photo.

Features:

  • 3 modes: fullscreen, slideshow and inner.
  • 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.

Basic usage:

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

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

2. Create an image viewer in fullscreen mode.

var viewer = ImageViewer(); 
viewer.show('1.png','[email protected]'); 

3. Create an image viewer in container mode.

$('#container').ImageViewer();

4. Create an image viewer in inner mode.

$('#image').ImageViewer();

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

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.