VerySimpleImageViewer.js

simple jquery plugin for display Images

Allows to zoom-in, zoom-out, and reset an image

Last version:

• 1.0.2

Support:

• zoom-in
• zoom-out
• reset

Demo

• See demo here.

usage:

include necessary css files:

<link rel="stylesheet" href="./css/jquery.verySimpleImageViewer.css"> 

include necessary js files:

<script type="text/javascript" src="./path/to/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.verySimpleImageViewer.js"></script> 

html body :

...   <div id="your_div_image_container"></div> ... 

add javascript:

<script type="text/javascript"> var image_path = "images/img-01.jpg"; $("#your_div_image_container").verySimpleImageViewer({    imageSource: image_path, /*image path*/    frame: ['100%', '100%'], /*width and height in percent or pixels*/    maxZoom: '900%', /*max zoom in percent*/    zoomFactor: '10%', /*zoom steps in percent*/    saveZoomPos: true, /*true , false - enable or disable saving zoom position even after reload the page  */    setZoomPos: [],/*array = [zoomLevel, dimensionX, dimensionY, positionX, positionY]*/    mouse: true,  /*true , false - enable or disable mouse usage*/    keyboard: true, /*true , false - Enable or disable the use of keyboard shortcuts*/    toolbar: true /*true , false - show or hide toolbar*/ }); </script> 

keyboard shortcuts:

 "+" or "x" or "X" - zoom in  "-" or "z" or "Z" - zoom out  "c" or "C" - reset - center image  "w" - move up  "s" - move down  "a" - move left  "d" - move right 

Changelog:

v.1.0.2:

• added setZoomPos:(array) - array that contain 5 numbers: zoomLevel, dimensionX, dimensionY, positionX, positionY. See demo.

v.1.0.1:

• added saveZoomPos:(true/false) - If true, this will keep the zoom position even after reloading the page (using web storage technology).