360 Degrees Image Rotate & Zoom Plugin with jQuery and Canvas - Tikslus360

Tikslus360 is a jQuery & Html5 canvas based 360 degree panoramic view plugin which allows you to rotate a product image by mouse moving as well as zooming the image with a magnifying glass effect by click and drag.

See also:

• Cyclotron - 360°Panorama Image Display Plugin
• Simple 360 Degrees Image Viewer Plugin For jQuery - Rotateimage
• jQuery Plugin For 360 Degree 3D Panoramic View - 3dEye.js
• jQuery Plugin For Draggable 360s Image Sequences - threesixtyjs
• AJAX-ZOOM - 3D Spin Rotate & Zoom 360 Plugin
• jQuery Plugin For Draggable 360 Degrees Product Image View - j360
• Super Tiny jQuery 360 Degrees Product Image Viewer

Basic Usage:

1. Include the jQuery tikslus360 plugin and other resources on the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/tikslus360.js"></script>
<link rel="stylesheet" href="css/tikslus360.css" />

2. Prepare a sequence of images and place them in a dictionary. And then create an empty container element for the container.

<div id="demo">
</div>

3. Setup the plugin in the javascript.

$(document).ready(function(){
$("#demo").tikslus360({
imageDir:'examples/car', // the location where you’ve put the images.
imageCount:36, // the number of images you have.
imageExt:'jpg', // the extension of the images. Make sure all the images have same extension.
canvasID:'mycar', // ID that will be assigned to the canvas
canvasWidth:640, // width of canvas
canvasHeight:480, // height of canvas
zoomPower:2, // power of zoom
zoomRadius:100, // radius of zoom lens
autoRotate:false, // if TRUE, auto rotation will be enabled by default
autoRotateInterval:100, // rotation inteval
fadeInInterval:400 // fade interval
});
});

---

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