-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
227 lines (184 loc) · 5.99 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE HTML>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<title>Tikslus 360 documentation</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/rainbow.min.js"></script>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/github.css" />
<style>
body{
padding:20px;
}
#wrapper{
margin:auto;
width:80%;
}
a{
text-decoration:none;
color: cornflowerblue;
}
a:hover{
text-decoration:underline;
}
#author_info{
margin:auto;width:80%;margin-top:20px;margin-bottom:20px;
}
#author_info td.info{
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
padding: 10px;
}
#author_info td.text{
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 10px;
}
.tbl_parameters{
}
.tbl_parameters td{
border:1px solid #ddd;
padding:10px;
}
.tbl_parameters th{
background-color:#000;
color:#fff;
}
</style>
</head>
<body>
<div id="wrapper">
<h1 class="main_heading">Tikslus 360 [ <a href="example.html"> Click here to view DEMO</a> ]</h1>
<table id="author_info" style="">
<tr>
<td class='info'><label><b>Created:04/28/2014</b></label>
<label><b>By:Pushpendra Singh Chouhan</b></label>
<label><b>Email: pushpendra.as400@gmail.com</b></label>
</td>
<td class='text'>
<p>
Thank you for purchasing <b><a href="http://tikslus.com/tikslus360/demo">Tikslus 360</a></b>. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form <a href="http://codecanyon.net/user/tikslusbhopal">here</a>. Thanks so much!
</p>
</td>
</tr>
</table>
<h4 class="heading">Getting started with Tikslus 360</h4>
<table cellpadding="10" cellspacing="10" >
<tr>
<td>
<p class="medium_heading">Download and Unzip:</p>
<ul class="ulnone">
<li>
Unzip the contents of the Zipped file you have downloaded from codecanyon.net.
</li>
<li>
place Tikslus360.css in the directory where you have kept your other css files. (for example: in CSS folder)
</li>
<li>
Place Tikslus360.min.js and jquery.min.js in your JS library.
</li>
</ul>
</td>
</tr>
<tr>
<td>
<p class="medium_heading">Installation:</p>
<p>
Add following link and scripts tags with your proper paths and paste the following code within the Head tags of your HTML document.
</p>
<pre><code data-language="html">
<link href="/css/Tikslus360.css" rel="stylesheet">
<script src="/js/jquery.min.js"></script>
<script src="/js/Tikslus360.min.js"></script>
</code>
</pre>
</td>
</tr>
<tr>
<td>
<p class="medium_heading">How to use plugin ?</p>
<p>Tikslus360 uses a sequence of images clicked at different angles.It plays these sequences to create 360 view.Images must be named using increasing numbers format.</p>
<p>For example: 1.jpg,2.jpg,3.jpg,4.jpg,5.jpg and so on</p>
<p>These images must be placed inside a directory and you specify the path of the directory to plugin.</p>
<p>Create a DIV element with a link having class attribute to <i>autorotate</i></p>
<p>Tikslus 360view comes with zoom effect. To see this effect in action click and hold the mouse on the 360 view you will have a zoom lens on the canvas.</p>
<p class="medium_heading">HTML markup</p>
<pre>
<code data-language="html">
<div id="view360">
<a href="#" class="autorotate">Auto rotate</a>
</div>
</code>
</pre>
</td>
</tr>
<tr>
<td>
<p class="medium_heading">Activate using Jquery selector</p>
<p>Using Jquery selectory inside $(document).ready() or $(window).load() to activate 360.</p>
<pre>
<code data-language="javascript">
<script language="javascript">
$(document).ready(function(){
$("#view360").tikslus360({imageDir:'images',imageCount:36,imageExt:'jpg',canvasID:'canvas1',canvasWidth:640,canvasHeight:480});
});
</script>
</code>
</pre>
<p>Please, note that you must provide following parameters mandatorily</p>
<ul class="ulnone">
<li>imageDir</li>
<li>imageCount</li>
<li>imageExt</li>
<li>canvasID</li>
<li>canvasWidth</li>
<li>canvasHeight</li>
</ul>
</td>
</tr>
</table>
<table class='tbl_parameters' width="100%" class="table">
<tr>
<th>Parameter</th><th>Default value</th><th>Allowed Value</th><th>Mandatory</th><th>Description</th>
</tr>
<tr>
<td>imageDir</td><td>images</td><td>Valid image directoy name (with full path)</td><Td>YES</td><td>Defines directoy where images reside</td>
</tr>
<tr>
<td>imageCount</td><td>0</td><td>Any valid integer number greater than 0</td><td>YES</TD><td>Number of images to be used for 360 view</td>
</tr>
<tr>
<td>imageExt</td><td>jpg</td><td>jpg,png,bmp</td><td>YES</td><td>All images must have this file extension</td>
</tr>
<tr>
<td>canvasID</td><td>blank</td><td>valid html ID</td><td>YES</td><td>ID that will be assigned to the canvas</td>
</tr>
<tr>
<td>canvasWidth</td><td>0</td><td>integer value > 0</td><td>YES</td><td>Width of canvas</td>
</tr>
<tr>
<td>canvasHeight</td><td>0</td><td>integer value > 0</td><td>YES</td><td>Height of canvas</td>
</tr>
<tr>
<td>zoomPower</td><td>2</td><td>integer value > 0 and < 10</td><td>NO</td><td>Power of zoom</td>
</tr>
<tr>
<td>zoomRadius</td><td>100</td><td>integer value > 0</td><td>NO</td><td>Radius of zoom lens</td>
</tr>
<tr>
<td>autoRotate</td><td>false</td><td>True or False</td><td>NO</td><td>If TRUE, auto rotation will be enabled by default</td>
</tr>
<tr>
<td>autoRotateInterval</td><td>100</td><td>integer value > 50</td><td>NO</td><td>rotation inteval (in milliseconds)</td>
</tr>
<tr>
<td>fadeInInterval</td><td>400</td><td>integer value >50</td><td>NO</td><td>Fade interval (in milliseconds)</td>
</tr>
</table>
</div>
</body>
</html>