Simple Image Viewer Plugin With jQuery

A really simple and cross-browser image viewer built with jQuery library that features image zoom, image rotate, image pan, zoom on mousewheel, keyboard interactions and more.

How to use it:

1. Create a container for the image viewer.

<div id="imageViewerContainer"></div>

2. Import jQuery library and the image viewer's JavaScript & CSS into the document.

<link rel="stylesheet" href="jquery.verySimpleImageViewer.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.verySimpleImageViewer.js"></script>

3. Call the function verySimpleImageViewer on the container element and specify the image to be displayed in the image viewer.

$("#imageViewerContainer").verySimpleImageViewer({
  imageSource: 'image.jpg'
});

4. Enable/disable the image zoom on mousewheel functionality.

$("#imageViewerContainer").verySimpleImageViewer({
  imageSource: 'image.jpg',
  mouse: true
});

5. Enable/disable the keyboard interactions.

• + or X - zoom in
• - or Z - zoom out
• C - reset - center image
• W - move up
• S - move down
• A - move left
• D - move right

$("#imageViewerContainer").verySimpleImageViewer({
  imageSource: 'image.jpg',
  keyboard: true
});

6. Enable/disable the toolbar.

$("#imageViewerContainer").verySimpleImageViewer({
  imageSource: 'image.jpg',
  toolbar: true
});

7. More configuration options.

$("#imageViewerContainer").verySimpleImageViewer({
  imageSource: 'image.jpg',
  frame: ['720px','480px',true],
  maxZoom: '300%',
  zoomFactor: '10%',
  saveZoomPos: true
});

Changelog:

v1.0.2 (2018-08-06)

• Update

---

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