Simple Image Viewer Plugin With jQuery, CSS3 And Canvas - ImageTrans.js

ImageTrans.js is a simple jQuery plugin that displays any pics in an image viewer interface with zooming, flipping and rotating features. Heavily based on HTML5 canvas and CSS3 3D transforms.

How to use it:

1. Add references to jQuery library and the jQuery ImageTrans.js script as follow:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="src/jQuery.ImageTrans.js"></script>

2. Create a container for the image viewer.

<div id="idContainer"> </div>

3. Initialize the image viewer with default options.

var it = $("#idContainer").ImageTrans(); 

4. Load a specified image to the image viewer.

it.load(imgSrc);

5. Rotate the image.

it.left();
it.right();

6. Flip the image.

it.vertical();
it.horizontal(); 

7. Zoom in/out the image.

it.zoomout();
it.zoomin();

8. Reset the image.

it.rest();

9. Default configuration options.

var it = $("#idContainer").ImageTrans({
  mode: "css3|filter|canvas",
  zoom: .1,
  onPreLoad: function () { },
  onLoad: function () { },
  onError: function (err) { }
}); 

---

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