-
Notifications
You must be signed in to change notification settings - Fork 32
/
index.html
executable file
·280 lines (251 loc) · 8.26 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
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="author" content="www.frebsite.nl" />
<meta name="viewport" content="width=device-width" />
<title>jQuery Touch Optimized Sliders "R"Us</title>
<!-- include jQuery -->
<script type="text/javascript" language="javascript" src="lib/jquery-1.8.2.min.js"></script>
<!-- include Tos "R"Us -->
<script type="text/javascript" language="javascript" src="src/js/jquery.tosrus.min.js"></script>
<link type="text/css" media="all" rel="stylesheet" href="src/css/jquery.tosrus.css" />
<!-- for dragging/swiping/pinching, include hammer.js -->
<script type="text/javascript" language="javascript" src="lib/jquery.hammer.min.js"></script>
<!-- for viewport-scale dependent buttons and captions -->
<script type="text/javascript" language="javascript" src="lib/FlameViewportScale.js"></script>
<style type="text/css" media="all">
html, body {
padding: 0;
margin: 0;
height: 100%;
}
body, div, p {
font-family: Arial, Helvetica, Verdana;
color: #333;
}
body {
background-color: #eee;
}
a, a:link, a:active, a:visited {
color: black;
text-decoration: underline;
}
a:hover {
color: #D6DE23;
}
hr {
margin: 75px -20px;
height: 0;
padding: 0;
border: 0;
border-top: 1px solid #ccc;
}
pre {
border-left: 5px solid #ccc;
width: 100%;
padding: 10px 0 10px 20px;
overflow: auto;
}
#wrapper {
background-color: #fff;
width: 70%;
min-width: 675px;
padding: 50px 50px 100px 50px;
margin: 0 auto;
border: 1px solid #ccc;
box-shadow: 0 0 5px #ccc;
}
#intro p {
font-size: 18px;
line-height: 24px;
}
.thumbs,
.gallery,
.links {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: #eee;
margin: 20px -50px;
}
.thumbs {
padding: 10px 30px 30px 50px;
text-align: center;
}
.thumbs:after {
content: " ";
display: block;
clear: both;
}
.thumbs a {
display: inline-block;
margin: 20px 20px 0 0;
}
.thumbs img,
.gallery img {
box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5 );
}
.gallery {
height: 320px;
padding: 20px 0;
}
.gallery.large {
height: 470px;
padding: 30px 0 0 0;
}
.gallery + .thumbs {
border-top: none;
margin-top: -40px;
}
.links {
padding: 30px 50px;
}
.links a {
line-height: 30px;
}
.hidden {
display: none;
}
</style>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#example1 a').TosRUs();
$("#gallery2").TosRUs({
slides: {
visible: 3,
collect: false,
css: {
padding: 10
}
}
});
$("#example3 a").TosRUs({
buttons: false,
keys: false,
wrapper: "#gallery3",
slides: {
collect: true,
visible: 1,
width: '80%',
offset: '10%',
css: {
padding: 10
}
}
});
$('#example4 a').TosRUs();
});
</script>
</head>
<body>
<div id="wrapper" style="position: relative;">
<div id="intro">
<h1>jQuery Touch Optimized Sliders "R"Us</h1>
<p>The one-stop-shop jQuery plugin for scrolling/swiping through all different kinds of content. On a desktop, tablet or smartphone, inside a HTML element or as a lightbox popup.</p>
<p>The plugin is responsive by default, so try resizing your browser.<br />
This is a demo-page, for the full documentation please visit <a href="http://tosrus.frebsite.nl">TosRUs.frebsite.nl</a></p>
</div>
<hr />
<div id="example1">
<h2>Lightbox example (default configuration)</h2>
<p>Clicking a thumbnail will open up a lightbox popup with a slider for the enlarged images.</p>
<div class="thumbs">
<a href="img/large/skiline1.jpg" title="Skiline Shanghai, China">
<img src="img/square/skiline1.jpg" /></a>
<a href="img/large/skiline2.jpg" title="Skiline Frankfurt, Germany">
<img src="img/square/skiline2.jpg" /></a>
<a href="img/large/skiline3.jpg" title="Skiline Hong Kong, China">
<img src="img/square/skiline3.jpg" /></a>
<a href="img/large/skiline4.jpg" title="Skiline Rotterdam, Netherlands">
<img src="img/square/skiline4.jpg" /></a>
</div>
<pre>
// Javascript:
$("#example1 a").TosRUs();
</pre>
</div>
<hr />
<div id="example2">
<h2>Inline slider</h2>
<p>If you specify a "wrapper", the popup gallery is replaced with an inline slider.</p>
<div id="gallery2" class="gallery">
<img src="img/portrait/skiline1.jpg" />
<img src="img/portrait/fireworks1.jpg" />
<img src="img/portrait/skiline2.jpg" />
<img src="img/portrait/fireworks2.jpg" />
<img src="img/portrait/skiline3.jpg" />
<img src="img/portrait/fireworks3.jpg" />
<img src="img/portrait/skiline4.jpg" />
<img src="img/portrait/fireworks4.jpg" />
</div>
<pre>
// Javascript:
$("#gallery2").TosRUs({
slides: {
collect: false,
visible: 3,
css: {
padding: 10
}
}
});
</pre>
</div>
<hr />
<div id="example3">
<h2>Thumbnail gallery</h2>
<p>Now lets combine the thumbnails from the first example with the "wrapper"-option from the second example and create yourself an inline gallery with thumbnail navigation.</p>
<div id="gallery3" class="gallery large"></div>
<div class="thumbs">
<a href="img/large/fireworks1.jpg">
<img src="img/square/fireworks1.jpg" /></a>
<a href="img/large/fireworks2.jpg">
<img src="img/square/fireworks2.jpg" /></a>
<a href="img/large/fireworks3.jpg">
<img src="img/square/fireworks3.jpg" /></a>
<a href="img/large/fireworks4.jpg">
<img src="img/square/fireworks4.jpg" /></a>
</div>
<pre>
// Javascript:
$("#example3 a").TosRUs({
buttons: false,
keys: false,
wrapper: "#gallery3",
slides: {
collect: true,
visible: 1,
width: '80%',
offset: '10%',
css: {
padding: 10
}
}
});
</pre>
</div>
<hr />
<div id="example4">
<h2>Other types of content</h2>
<p>Besides images, you can also scroll through video's from YouTube and Vimeo and any other type of HTML.</p>
<div class="links">
<a href="https://www.youtube.com/watch?v=W3OQgh_h4U4">YouTube: People Are Awesome.</a><br />
<a href="http://vimeo.com/21419634">Vimeo: In The Land Of The Northern Lights.</a><br />
<a href="#hidden-content">Some hidden HTML.</a>
</div>
<div class="hidden">
<div id="hidden-content" style="max-width: 750px;">
<img src="img/happy_muffin.png" alt="happy_muffin" width="173" height="231" style="float: right; margin: 0 0 20px 20px;" />
<h3>Cupcake ipsum dolor sit amet</h3>
<p>Liquorice powder marzipan jujubes marzipan cotton candy. Macaroon chupa chups muffin faworki chocolate bar cheesecake dragée cake jujubes. Caramels oat cake tiramisu. Marzipan cake brownie tart. Ice cream liquorice caramels pie tiramisu marzipan icing cookie. Jelly beans tiramisu ice cream fruitcake chocolate cake cake. Soufflé oat cake wafer chocolate cake. Toffee cheesecake sugar plum croissant. Bonbon dragée macaroon macaroon gummies wypas. Applicake lemon drops lemon drops. Cake lemon drops icing carrot cake tiramisu fruitcake fruitcake jelly sugar plum. Danish toffee ice cream pastry applicake gingerbread. Oat cake candy canes powder gingerbread sugar plum cotton candy danish wypas.</p>
<p>Brownie wafer wafer. Soufflé marshmallow apple pie marzipan chocolate cake sweet roll lollipop pudding cheesecake. Powder cheesecake pudding jujubes lollipop powder. Dragée tootsie roll muffin jujubes bear claw fruitcake gummi bears. Cheesecake lollipop pudding gingerbread. Bear claw caramels tart candy canes ice cream candy apple pie icing bonbon. Chocolate cake applicake gingerbread bonbon carrot cake. Wypas tart chupa chups caramels pudding marzipan ice cream fruitcake. Tootsie roll gummi bears wypas carrot cake soufflé donut. Bear claw marzipan bonbon cupcake. Wafer cupcake jelly chupa chups carrot cake fruitcake. Jelly brownie chupa chups jelly fruitcake chocolate cheesecake.</p>
</div>
</div>
<pre>
// Javascript:
$("#example4 a").TosRUs();
</pre>
</div>
</div>
</body>
</html>