360 Degrees Image Rotate & Zoom Plugin with jQuery and Canvas - Tikslus360
File Size: | 606 KB |
---|---|
Views Total: | 39280 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.