forked from rdallasgray/roto
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.html
114 lines (110 loc) · 4.56 KB
/
test.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
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="src/jquery.roto.js"></script>
<script type="text/javascript" src="lib/bez/jquery.bez.min.js"></script>
<link rel="stylesheet" href="demo/roto.css">
</head>
<body>
<h1>Roto demo</h1>
<h3>A flexible-width image carousel:</h3>
<div id="carousel" class="roto">
<button class="prev">Previous</button>
<button class="next">Next</button>
<div class="rotoFrame testFrame">
<a id="c1"><img src="demo/test-images/roto-test-01.jpg"/></a>
<a id="c2"><img src="demo/test-images/roto-test-02.jpg"/></a>
<a id="c3"><img src="demo/test-images/roto-test-03.jpg"/></a>
<a id="c4"><img src="demo/test-images/roto-test-04.jpg"/></a>
<a id="c5"><img src="demo/test-images/roto-test-05.jpg"/></a>
<a id="c6"><img src="demo/test-images/roto-test-06.jpg"/></a>
<a id="c7"><img src="demo/test-images/roto-test-07.jpg"/></a>
<a id="c8"><img src="demo/test-images/roto-test-08.jpg"/></a>
<a id="c9"><img src="demo/test-images/roto-test-09.jpg"/></a>
<a id="c10"><img src="demo/test-images/roto-test-10.jpg"/></a>
<a id="c11"><img src="demo/test-images/roto-test-11.jpg"/></a>
<a id="c12"><img src="demo/test-images/roto-test-12.jpg"/></a>
<a id="c13"><img src="demo/test-images/roto-test-13.jpg"/></a>
<a id="c14"><img src="demo/test-images/roto-test-14.jpg"/></a>
<a id="c15"><img src="demo/test-images/roto-test-15.jpg"/></a>
<a id="c16"><img src="demo/test-images/roto-test-16.jpg"/></a>
</div>
</div>
<h3>A slideshow:</h3>
<div id="slideshow" class="roto">
<ul class="testFrame">
<li id="s1" id="s1">Slide 1</li>
<li id="s2">Slide 2</li>
<li id="s3">Slide 3</li>
<li id="s4">Slide 4</li>
<li id="s5">Slide 5</li>
<li id="s6">Slide 6</li>
</ul>
</div>
<button id="slideshow-prev">Previous</button>
<button id="slideshow-next">Next</button>
<h3>A listbox:</h3>
<div id="listbox" class="roto">
<div class="testFrame">
<span id="l1" id="l1">List item 1</span>
<span id="l2">
<form><input type="text"/><input type="submit"/></form>
</span>
<span id="l3">List item 3</span>
<span id="l4">List item 4</span>
<span id="l5">List item 5</span>
<span id="l6">List item 6</span>
<span id="l7">List item 7</span>
<span id="l8">List item 8</span>
<span id="l9">List item 9</span>
<span id="l10">List item 10</span>
<span id="l11">List item 11</span>
<span id="l12">List item 12</span>
<span id="l13">List item 13</span>
<span id="l14">List item 14</span>
<span id="l15">List item 15</span>
<span id="l16">List item 16</span>
<span id="l17">List item 17</span>
<span id="l18">List item 18</span>
<span id="l19">List item 19</span>
<span id="l20">List item 20</span>
</div>
</div>
<button id="listbox-prev">Previous</button>
<button id="listbox-next">Next</button>
<h3>A vertical, multiple carousel with snapping:</h3>
<div id="vertical-multi" class="roto">
<ul class="testFrame">
<li><img src="demo/test-images/roto-test-01.jpg"/></li>
<li><img src="demo/test-images/roto-test-02.jpg"/></li>
<li><img src="demo/test-images/roto-test-03.jpg"/></li>
<li><img src="demo/test-images/roto-test-04.jpg"/></li>
<li><img src="demo/test-images/roto-test-05.jpg"/></li>
<li><img src="demo/test-images/roto-test-06.jpg"/></li>
<li><img src="demo/test-images/roto-test-07.jpg"/></li>
<li><img src="demo/test-images/roto-test-08.jpg"/></li>
<li><img src="demo/test-images/roto-test-09.jpg"/></li>
<li><img src="demo/test-images/roto-test-10.jpg"/></li>
<li><img src="demo/test-images/roto-test-11.jpg"/></li>
<li><img src="demo/test-images/roto-test-12.jpg"/></li>
<li><img src="demo/test-images/roto-test-13.jpg"/></li>
<li><img src="demo/test-images/roto-test-14.jpg"/></li>
<li><img src="demo/test-images/roto-test-15.jpg"/></li>
<li><img src="demo/test-images/roto-test-16.jpg"/></li>
</ul>
</div>
<button id="vertical-multi-prev">Previous</button>
<button id="vertical-multi-next">Next</button>
</body>
<script type="text/javascript">
$(window).load(function() {
$("#carousel").find("a").bind("click", function() { alert("clicked!"); });
$("#carousel").roto({ snap: false });
$("#slideshow").roto({ btnAction: "step" });
$("#listbox").roto({ direction: "v" });
$("#vertical-multi").roto({ direction: "v" });
$(".roto").css("visibility", "visible");
});
</script>
</html>