Download
User Rating: 4.1/5 ( 4 votes)
Tikslus 360 is a jquery plugin to view image in 360 degree mode with following features:
-
Simple and elagant 360 image view
-
Javascript CANVAS based
-
Move cursor horizontally in both directions to rotate view
-
Click & Drag to Zoom Image
-
Auto rotate image
Source: tikslus.com
1. INCLUDE CSS AND JS FILES
<link href="/css/Tikslus360.css" rel="stylesheet">
<script src="/js/jquery.min.js"></script>
<script src="/js/Tikslus360.min.js"></script>
2. HTML
<div id="view360">
<a href="#" class="autorotate">Auto rotate</a>
</div>
3. JAVASCRIPT
$(document).ready(function(){
$("#view360").tikslus360({imageDir:'images',imageCount:36,imageExt:'jpg',canvasID:'canvas1',canvasWidth:640,canvasHeight:480});
});
4. OPTIONS
|
Parameter |
Default value |
Allowed Value |
Mandatory |
Description |
|
imageDir |
images |
Valid image directoy name (with full path) |
YES |
Defines directoy where images reside |
|
imageCount |
0 |
Any valid integer number greater than 0 |
YES |
Number of images to be used for 360 view |
|
imageExt |
jpg |
jpg,png,bmp |
YES |
All images must have this file extension |
|
canvasID |
blank |
valid html ID |
YES |
ID that will be assigned to the canvas |
|
canvasWidth |
0 |
integer value > 0 |
YES |
Width of canvas |
|
canvasHeight |
0 |
integer value > 0 |
YES |
Height of canvas |
|
zoomPower |
2 |
integer value > 0 and < 10 |
NO |
Power of zoom |
|
zoomRadius |
100 |
integer value > 0 |
NO |
Radius of zoom lens |
|
autoRotate |
false |
True or False |
NO |
If TRUE, auto rotation will be enabled by default |
|
autoRotateInterval |
100 |
integer value > 50 |
NO |
rotation inteval (in milliseconds) |
|
fadeInInterval |
400 |
integer value >50 |
NO |
Fade interval (in milliseconds) |
JS Tutorial
