forked from KevinBatdorf/codaslider
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
493 lines (424 loc) · 21.2 KB
/
Copy pathindex.html
File metadata and controls
493 lines (424 loc) · 21.2 KB
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
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="description" content="The Coda Slider 3 is a fully-featured, simple-to-use jQuery content slider that is lightweight and fast. Best of all...It's free, so get started right away." />
<!-- Link for Facebook posting, then favicon -->
<link rel="image_src" href="./img/image.png" />
<link rel="shortcut icon" href="img/favicon.ico" />
<link rel="stylesheet" type="text/css" media="screen" href="./css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<!--script src="./js/jquery-1.7.2.min.js"></script>
<script src="./js/jquery-ui-1.8.20.custom.min.js"></script>-->
<script src="./js/jquery.coda-slider-3.0.js"></script>
<title>Coda Slider 3: A jQuery HTML Content Slider</title>
<script>
$(function() {
$('#main-slider').codaSlider({
autoHeight: false,
continuous:false,
dynamicArrows: false,
dynamicTabs: false
});
$('#showcase').codaSlider();
$('#continuous').codaSlider({
autoSlide: true,
continuous: true,
dynamicArrowsGraphical: true,
dynamicTabsAlign: "right",
dynamicTabsPosition: "bottom",
panelTitleSelector: "div.title"
});
$('#dynamic-tabs').codaSlider({
autoSlideControls:true,
dynamicTabsAlign: "left",
dynamicTabsPosition: "top",
dynamicArrows: false
})
$('#information').codaSlider({
dynamicArrows: false,
dynamicTabs: false,
slideEaseFunction: "easeOutCirc"
});
});
</script>
<script type="text/javascript">
/* Google Analytics Code */
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32725877-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
function recordOutboundLink(link, category, action) {
_gat._getTrackerByName()._trackEvent(category, action);
setTimeout('document.location = "' + link.href + '"', 100);
}
</script>
</head>
<body>
<!-- HEADER -->
<div id="header_wrap" class="outer">
<header class="inner top">
<a id="forkme_banner" href="https://github.com/KevinBatdorf/CodaSlider/tree/master">View on GitHub</a>
<h1 id="project_title">Coda Slider,</h1>
<h2 id="project_tagline">A Lightweight, jQuery Content Slider by <a href="http://twitter.com/#/kevinbatdorf" target="_blank" class="user-mention">Kevin Batdorf</a></h2>
</header>
<hr class="soften" />
</div>
<!-- Main Slider -->
<div class="coda-slider" id="main-slider">
<div>
<!-- Showcase Slider -->
<div class="coda-slider" id="showcase">
<div>
<h2 class="title" style="display:none">Home</h2>
<h2>Coda Slider 3.0</h2>
<p>Welcome to the Coda Slider version 3, the first major release since 2009. Originally released way back in 2007 by Niall Doherty, the Coda Slider has been rebuilt from the ground up, packed with new features and improved functionality.</p>
<h3>Your Favorite Coda Slider Just Got Better!</h3>
<p>The most noticeable feature is the continuous sliding, but you'll likely also stumble upon little fixes here and there that improve the overall user experience. Check below for a few demos and stay tuned for future updates.</p>
<div>Have a request or find a bug? Let me know on <a target="_blank" href="https://github.com/KevinBatdorf/CodaSlider/issues" class="user-mention">Github</a>, or if you prefer email, <a target="_blank" href="mailto:kevin@kevinbatdorf.com" class="user-mention">contact me here</a>.</div>
</div>
<div>
<h2 class="title">How does it work?</h2>
<p>It's simple! Each slide can be built and styled anyway you choose. The entire slider is created dynamically around your HTML and can be modified via the settings below. Additionally, version 3.0 is backwards compatible meaning that if you are already using version 2.0, you don't need to change a thing.</p>
<p>Creating a panel is as simple as this:</p>
<pre><code><div class="coda-slider" id="slider-id">
<div>
<h2 class="title">Panel1</h2>
</div>
</div>
</code></pre>
</div>
<div>
<h2 class="title">Installation</h2>
<p>Installation is simple and only requires the following to be placed after the jQuery script.</p>
<pre><code><script>
$(function() {
$('#slider-id').codaSlider();
});
</script>
</code></pre>
<p>The <code>#slider-id</code> can be any unique id that you apply to the slider. You also need to be sure you import the jQuery, jQuery UI, and the Coda Slider script files as well as the Coda Slider stylesheet. See below for detailed instructions and advanced options.</p>
</div>
<div>
<h2 class="title">Contact</h2>
<form>
<div style="margin-bottom:10px;">Here's an example of a contact form.</div>
<div class="myRow">
<label class="labelCol" for="myName">Name:</label>
<input type="text" name="myName" id="myName" />
</div>
<div class="myRow">
<label class="labelCol" for="myEmail">E-mail:</label>
<input type="text" name="myEmail" id="myEmail" />
</div>
<div>
<label class="labelCol" for="myComments">Comments:</label>
<textarea name="myComments" id="myComments" rows="6" cols="60"></textarea>
</div>
<div class="tweet">This form won't submit, but you can always try me on twitter <a target="_blank" href="https://twitter.com/#!/kevinbatdorf" class="user-mention">@kevinbatdorf</a></div>
</form>
</div>
</div>
<!-- End Showcase Slider -->
</div>
<div>
<h2 class="title">Continuous Sliding</h2>
<!-- Continuous Slider -->
<div class="coda-slider" id="continuous">
<div>
<h2>Angkor Wat</h2>
<div class="title">*</div>
<img src="./img/angkor_wat.png" alt="Angkor Wat" height="280" width="660" />
<p>Cambodia's Angkor Wat temple.</p>
</div>
<div>
<h2>Sihanoukville Beach</h2>
<div class="title">*</div>
<img src="./img/beach.png" alt="Angkor Wat" height="280" width="660" />
</div>
<div>
<h2>Ayutthaya, Thailand</h2>
<div class="title">*</div>
<img src="./img/monk.png" alt="Angkor Wat" height="280" width="660" />
</div>
</div>
<!-- End Continuous Slider -->
</div>
<div>
<h2 class="title">Panel 3</h2>
<!-- Dynamic Tabs Slider -->
<div class="coda-slider" id="dynamic-tabs">
<div>
<h2 class="title">Dynamic Positioning</h2>
<p>The tabs are dynamically positioned based on the settings. Options include "top", "bottom", "left", "right" and "center"</p>
</div>
<div>
<h2 class="title">Hard-coded Positioning</h2>
<p>If you prefer, you can hard-code the naviation and tabs to get the perfect design. You must be sure to set both <code>dynamicTabs</code> and <code>dynamicArrows</code> to false in the settings. Then, use the following as a guide when building your html:</p>
<pre><code><div id="slider-id-wrapper" class="coda-slider-wrapper">
<div class="coda-nav-left"><a href="#" data-dir="prev" title="Slide left">« left</a></div>
<div class="coda-nav">
<ul>
<li class="tab1"><a href="#1" title="Panel 1">Panel 1</a></li>
<li class="tab2"><a href="#2" title="Panel 2">Panel 2</a></li>
<li class="tab3"><a href="#3" title="Panel 3">Panel 3</a></li>
<li class="tab4"><a href="#4" title="Panel 4">Panel 4</a></li>
</ul>
</div>
<div class="coda-nav-right"><a href="#" data-dir="next" title="Slide right">» right</a></div>
<class="coda-slider" id="slider-id">
/* Panels go here */
</div>
</div></code></pre>
</div>
<div>
<h2 class="title">CSS</h2>
<p>The entire panel is styled with CSS exactly how you would expect. You can make changes directly to the included CSS file, or you can create your own style sheet. If you are using SASS, I have also included a SCSS stylesheet for your convenience.</p>
</div>
<div>
<h2 class="title">Cross-linking</h2>
<p>Cross-linking is simple. The links below were created as follows:</p>
<pre><code><a href="#1" data-ref="dynamic-tabs">Tab 1</a></code></pre>
<p> the #1 points to the 1st tab, and the rel attribute points to the slider ID. Note that it's possible to link to multible sliders by separating the ids with a space, for example:</p>
<pre><code><a href="#1" data-ref="dynamic-tabs another-slider">Tab 1</a></code></pre>
</div>
</div>
<div id="dynamic-cross-links">
<p>Here are some cross-links (see <a href="#4" data-ref="dynamic-tabs">Tab 4</a> for more info):</p>
<p><a href="#" name="start" data-ref="dynamic-tabs">Start</a> Auto Play</p>
<a href="#1" data-ref="dynamic-tabs">Dynamic Positioning</a><br />
<a href="#2" data-ref="dynamic-tabs">Hard-coded Positioning</a><br />
<a href="#3" data-ref="dynamic-tabs">CSS</a><br />
<a href="#4" data-ref="dynamic-tabs">Cross-linking</a>
</div>
<!-- End Dynamic Tabs Slider -->
</div>
<div>
<h2 class="title">Panel 4</h2>
<p>Nulla ultricies ornare erat, a rutrum lacus varius nec. Pellentesque vehicula lobortis dignissim. Ut scelerisque auctor eros sed porttitor. Nullam pulvinar ultrices malesuada. Quisque lobortis bibendum nisi et condimentum. Mauris quis erat vel dui lobortis dignissim.</p>
</div>
</div>
<!-- End Main Slider -->
<!-- MAIN CONTENT -->
<div id="main_content_wrap" class="outer clearfix">
<section id="main_content" class="inner">
<div class="clearfix" style="width:50%;border:1px dotted;padding: 3px 10px;">
<a title="Liquid Slider" href="http://liquidslider.kevinbatdorf.com"><img style="width:100px;height:auto;float:left" src="http://liquidslider.kevinbatdorf.com/wp-content/themes/liquidslider/library/images/logo.png" alt="Liquid Slider" /></a>
<div style="float:right; width:385px;">
<h3 style="margin:10px 0 0 0">Introducing the Liquid Slider</h3>
<p style="margin:0 0 10px 0">A fully <span style="font-size:145%;">Responsive</span>, HTML5-ready content slider that adapts brilliantly on mobile devices by utilizing hardware accelerated CSS3 Transitions.. It's <a title="Liquid Slider" href="http://liquidslider.kevinbatdorf.com" onClick="recordOutboundLink(this, 'liquid', 'liquid');return false;">available now </a>. </p>
</div>
</div>
<section class="left">
<section id="downloads">
<a class="zip_download_link" href="https://github.com/KevinBatdorf/CodaSlider/zipball/master" onClick="recordOutboundLink(this, 'Zipball', 'tarbal');return false;">Download this project as a .zip file</a>
<a class="tar_download_link" href="https://github.com/KevinBatdorf/CodaSlider/tarball/master" onClick="recordOutboundLink(this, 'Tarball', 'zipball');return false;">Download this project as a tar.gz file</a>
<div style="float:right;padding-right:5px;">Download Here</div>
</section>
<!-- Information Slider -->
<div class="coda-slider" id="information">
<div>
<h2 class="title" style="display:none;">Panel 1</h2>
<p></p>
</div>
<div>
<h2 class="title">Continuous Sliding</h2>
<p>Continuous sliding is now a default feature. However, if you wish to disable it, set the options as follows:</p>
<pre><code></script>
$(function() {
$('#slider-id').codaSlider({
continuous:false
});
});
</script></code></pre>
<a href="#1" data-ref="main-slider information">... back</a>
</div>
<div>
<h2 class="title">Dynamic Tabs & Cross-linking</h2>
<p>Tabs are dynamically created based and positioned based on the settings. The positioning can be achieved as follows. Check the settings section below for other options.</p>
<pre><code></script>
$(function() {
$('#slider-id').codaSlider({
dynamicTabsAlign: "left",
dynamicArrows: false
});
});
</script></code></pre>
<a href="#1" data-ref="main-slider information">... back</a>
</div>
</div>
<!-- End Information Slider -->
<section id="features">
<h3>Features</h3>
<p>Click each feature below to learn more and see it in action.</p>
<a class="button" href="#2" data-ref="main-slider information">Continuous Sliding</a>
<a class="button" href="#3" data-ref="main-slider information">Dynamic Tabs & Cross-Linking</a>
</section>
<section id="how-to-install">
<h3>How to Install</h3>
<ul>
<li>Download and extract the files to your working directory.</li>
<li>Import the scripts and styles within your html code.</li>
<li>Structure your html accordingly. I'll use a basic two panel example below.</li>
<li>Initialize the code by calling it just before closing the <code><head></head></code>.</li>
</ul>
<pre class="install-instructions"><code style="cursor:pointer">Click to see a two panel example.
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="./css/coda-slider.css">
<script src="./js/jquery-1.7.2.min.js"></script>
<script src="./js/jquery-ui-1.8.20.custom.min.js"></script>
<script src="./js/jquery.coda-slider-3.0.js"></script>
</script>
$(function() {
$('#slider-id').codaSlider();
});
</script>
</head>
<body>
<div class="coda-slider" id="slider-id">
<div>
<h2 class="title">Panel 1</h2>
//Content goes here
</div>
<div>
<h2 class="title">Panel 2</h2>
//Content goes here
</div>
</div>
</body>
</html></code></pre>
</section>
<section id="api-settings" class='clearfix'>
<h3>Advanced Settings</h3>
<pre><code>$('#slider-id').codaSlider({
option:value
});</code></pre>
<pre class="api-clickable"><span class="h4">Basic Settings</span><code>
<strong>firstPanelToLoad</strong>
Default: 1
Description: Slides the panel to the specified number.
<strong>panelTitleSelector</strong>
Default: "h2.title"
Description: Selects the element to use as the tab display name.
<strong>slideEaseDuration</strong>
Default: 2000
Description: Sets the speed one panel moves to the next.
<strong>slideEaseFunction</strong>
Default: "easeInOutExpo"
Description: Sets the easing effect for the slider. <a href="http://jqueryui.com/demos/effect/easing.html" title="jQuery easing effects" target="_blank">See all available</a>
</code></pre>
<pre class="api-clickable"><span class="h4">Auto Height</span><code>
<strong>autoHeight</strong>
Default: true
Description: Automically adjusts the height to match
the content, if true.
<strong>autoHeightEaseDuration</strong>
Default: 7000
Description: Sets the speed at which the height will adjust.
<strong>autoHeightEaseFunction</strong>
Default: "easeInOutExpo"
Description: Sets the easing effect for the slider. <a href="http://jqueryui.com/demos/effect/easing.html" title="jQuery easing effects" target="_blank">See all available</a>
</code></pre>
<pre class="api-clickable"><span class="h4">Auto Slide</span><code>
<strong>autoSlide</strong>
Default: false
Description: If true, the slide will automatically slide.
<strong>autoSliderDirection</strong>
Default: 'right'
Description: "left" or "right" sliding are supported.
<strong>autoSlideInterval</strong>
Default: 4000
Description: The speed at which the slider auto transitions
to the next panel.
<strong>autoSlideControls</strong>
Default: false
Description: Enables auto controls for the slider. Works
even when autoslide is false.
Usage: <a href="#" name="start" data-ref="slider-id" >Start</a>
<a href="#" name="stop" data-ref="slider-id" >Stop</a>
Note that you only need one link, as it will dynamically update
after being clicked. So if autoSlide is enabled, use "Stop"
(see below), otherwise use "Start".
<strong>autoSlideStartText</strong>
Default: 'Start'
Description: The text used as the start button. You must code
it in manually too.
Usage: <a href="#" name="start" data-ref="slider-id">Start</a>
<strong>autoSlideStopText</strong>
Default: 'Stop'
Description: The text used as the start button. You must code
it in manually too.
Usage: <a href="#" name="stop" data-ref="slider-id">Stop</a>
<strong>autoSlideStopWhenClicked</strong>
Default: true
Description: The slider will stop if true and the user clicks
anywhere on the slider.
</code></pre>
<pre class="api-clickable"><span class="h4">Continuous Sliding</span><code>
<strong>continuous</strong>
Default: true
Description: The slider will continuously slide as if it
were never-ending.
</code></pre>
<pre class="api-clickable"><span class="h4">Dynamic Arrows</span><code>
<strong>dynamicArrows</strong>
Default: true
Description: If true, the slider will automatically create arrows.
<strong>dynamicArrowsGraphical</strong>
Default: false
Description: If true, the slider will use graphical arrows.
<strong>dynamicArrowLeftText</strong>
Default: "« left"
Description: The text for the non-graphical left arrow.
<strong>dynamicArrowRightText</strong>
Default: "right »"
Description: The text for the non-graphical right arrow.
</code></pre>
<pre class="api-clickable" style="clear:right;"><span class="h4">Dynamic Tabs</span><code>
<strong>dynamicTabs</strong>
Default: true
Description: If true, the slider will dynamically create navigation tabs.
<strong>dynamicTabsAlign</strong>
Default: "center"
Description: Tabs will be aligned either: "left", "center", or "right".
<strong>dynamicTabsPosition</strong>
Default: "top"
Description: Tabs can either be placed on the "top" or
"bottom" of the container.
</code></pre>
</section>
<section id="contact">
<h3>Sites Built With The Coda Slider</h3>
<p>If you are using the Coda Slider in a creative or obvious way on your website, let me know and I will feature it here.</p>
</section>
</section>
<section class="right">
<h3>This is a donate button</h3>
<p>Coda Slider will always be free, but if you want to help out, consider a small donation.</p>
<form style="padding:0;border:0;" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="KYU9V5SAZA7YU">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!">
</form>
</section>
</section>
</div>
<!-- FOOTER -->
<div id="footer_wrap" class="outer">
<footer class="inner">
<p class="copyright">Codaslider maintained by <a target="_blank" href="https://github.com/KevinBatdorf">KevinBatdorf</a></p>
</footer>
</div>
<script>
$('.install-instructions').on('click', function(){$(this).toggleClass('install-instructions')});
$('.api-clickable').on('click', function(){$(this).removeClass('api-clickable')});
</script>
</body>
</html>