-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
699 lines (568 loc) · 25.7 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
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
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sideburn</title>
<link rel="stylesheet" href="demo.css">
<script src="deps/jquery-1.6.4.min.js"></script>
<script src="deps/jquery-ui-1.8.16.slider.min.js"></script>
<script src="deps/underscore.min.js"></script>
<script src="jquery.sideburn.js"></script>
<script>
var recalculate = function() {
var slideshows = $('ul.sideburn'),
data = {};
slideshows.sideburn('destroy');
// clear
slideshows
.removeAttr('data-speed')
.removeData('data-speed')
.removeAttr('data-timeout')
.removeData('data-timeout')
.removeAttr('data-shuffle')
.removeData('data-shuffle')
.removeAttr('data-transition')
.removeData('data-transition')
.removeAttr('data-showfirstrun')
.removeData('data-showfirstrun')
.removeAttr('data-nav')
.removeData('data-nav');
data['speed'] = $('input[name=speed]').val();
if ($('#autoplay_yes').is(':checked')) {
data['timeout'] = $('input[name=interval]').val();
} else {
data['timeout'] = 0;
}
data['shuffle'] = false;
data['transition'] = $('select[name=transition]').val();
data['showfirstrun'] = $('#showfirstrun_yes').is(':checked');
if (!$('#position_none').is(':checked')) {
var nav = {
position: $('input[name=position]:checked').val(),
style: $('input[name=style]:checked').val(),
navSeparator: $('input[name=navseparator]').val(),
nextText: $('input[name=nexttext]').val(),
previousText: $('input[name=previoustext]').val(),
showTotal: $('#showtotal_yes').is(':checked'),
totalSeparator: $('input[name=totalseparator]').val(),
numbering: $('input[name=numbering]:checked').val(),
showAll: $('#showall_yes').is(':checked'),
allText: $('input[name=alltext]').val(),
oneText: $('input[name=onetext]').val()
};
data['nav'] = nav;
} else {
// removeData doesn't work. oh well.
data['nav'] = null;
}
var fake = $('<ul class="sideburn">...</ul>'),
fakeWrap = $('<div></div>');
for (var k in data) {
if (data.hasOwnProperty(k)) {
// set the data
slideshows.data(k, data[k]);
if (window.JSON) {
var v = data[k];
if (_.isObject(v)) {
v = JSON.stringify(v);
}
fake.attr('data-'+k, v);
}
}
}
fakeWrap.append(fake);
if (window.JSON) {
// BUG: this will replace < and > inside text in the JSON attributes too
$('#htmlcode').val(
fakeWrap.html()
.replace(/"{/, "'{")
.replace(/}"/, "}'")
.replace(/"/g, '"')
.replace(/,/g, ', ')
//.replace(/</g, '<')
//.replace(/>/g, '>')
//.replace(/ data-/g, "<br> data-")
.replace(/ data-/g, "\n data-")
);
$('#jsoncode').val(JSON.stringify(data).replace(/,/g, ', '));
} else {
$('#htmlcode').val('JSON not supported in this browser.');
$('#jsoncode').val('JSON not supported in this browser.');
}
// only initialize the one that's visible
// (otherwise you get a lot of "zero" dimensions)
$('.tabs-content .active ul.sideburn').sideburn();
};
var refresh = _.debounce(recalculate, 500);
$(document).ready(function() {
var tabs = $('ul.tabs');
tabs.each(function(i) {
//Get all tabs
var tab = $(this).find('> li > a');
tab.click(function(e) {
//Get Location of tab's content
var contentLocation = $(this).attr('href');
//Let go if not a hashed one
if (contentLocation.charAt(0) == "#") {
e.preventDefault();
//Make Tab Active
tab.removeClass('active');
$(this).addClass('active');
//Show Tab Content & add active class
$(contentLocation)
.show()
.addClass('active')
.siblings()
.hide()
.removeClass('active');
var sideburn = $(contentLocation).find('ul.sideburn'),
wrap = $(contentLocation).find('.sideburn-wrap');
if (sideburn.length) {
if (wrap.length) {
sideburn.sideburn("refresh"); // recalculate size
} else {
sideburn.sideburn(); // initialize
}
}
}
});
});
$('#sideburnsettings .toggle').click(function() {
var toggle = $(this),
code = toggle.next();
code.toggle();
});
var settingswrap = $('#sideburnsettings');
// sliders
$('.sliderfield').each(function() {
var fld = $(this),
input = fld.find('input'),
slider = fld.find('.slider'),
value = input.val();
slider.slider({
min: slider.data('min'),
max: slider.data('max'),
step: slider.data('step'),
value: value
});
});
$('.slider').bind('slide', function(event, ui) {
var fld = $(this).parents('.sliderfield'),
input = fld.find('input'),
valueLabel = fld.find('.value'),
val = ui.value;
input.val(val);
valueLabel.html(val);
});
// show / hide subsections of the form
var
radioMap = {
'style_next': 'withnext',
'style_jump': 'withjump',
'autoplay_yes': 'withinterval',
'showtotal_yes': 'withtotalseparator',
'showall_yes': 'withall',
'style_thumbnails': 'withoutnavseparator'
};
settingswrap.find('input[type=radio]').change(function() {
for (var id in radioMap) {
if (radioMap.hasOwnProperty(id)) {
var
className = radioMap[id],
checked = $('#'+id).is(':checked');
if (checked && !settingswrap.hasClass(className)) {
settingswrap.addClass(className);
} else if (!checked && settingswrap.hasClass(className)) {
settingswrap.removeClass(className);
}
}
}
});
settingswrap.find('.slider').bind('slidechange', function() {
refresh();
});
settingswrap.find('input[type=radio],select').change(function() {
refresh();
});
settingswrap.find('input[type=text]').keyup(function() {
refresh();
});
$('textarea.code').mouseup(function() {this.select();});
recalculate();
});
</script>
</head>
<body>
<div id="stage">
<div class="wrap">
<div id="sideburnsettings" class="withnext">
<h1>Sideburn Settings</h1>
<hr>
<div class="field sliderfield">
<label>speed
<div class="sliderwrap">
<input type="hidden" name="speed" value="500">
<div class="slider" id="speed-slider" data-step="100" data-min="0" data-max="2000"></div>
<div class="valuewrap"><span class="value">500</span>ms</div>
</div>
</label>
</div>
<div class="field selectfield">
<label for="transition">transition
<select name="transition">
<option value="fade">fade</option>
<option value="slide-left">slide left</option>
<option value="slide-right">slide right</option>
<option value="slide-left-right">horizontal line</option>
<option value="slide-left-right-wrap" selected>horizontal wrap</option>
<option value="slide-up">slide up</option>
<option value="slide-down">slide down</option>
<option value="slide-up-down">vertical line</option>
<option value="slide-up-down-wrap">vertical wrap</option>
</select>
</label>
</div>
<div class="field optionsfield">
autoplay?
<div class="options">
<label for="autoplay_yes">
<input type="radio" name="autoplay" id="autoplay_yes" value="true"> yes
</label>
<label for="autoplay_no">
<input type="radio" name="autoplay" id="autoplay_no" value="false" checked> no
</label>
</div>
</div>
<div class="field sliderfield" id="intervalfield">
<label for="interval">interval
<div class="sliderwrap">
<input type="hidden" name="interval" value="4000">
<div class="slider" id="interval-slider" data-step="100" data-min="100" data-max="10000"></div>
<div class="valuewrap"><span class="value">4000</span>ms</div>
</div>
</label>
</div>
<!--
<div class="field optionsfield" id="shufflefield">
shuffle?
<div class="options">
<label for="shuffle_yes">
<input type="radio" name="shuffle" id="shuffle_yes" value="true"> yes
</label>
<label for="shuffle_no">
<input type="radio" name="shuffle" id="shuffle_no" value="false" checked> no
</label>
</div>
</div>
-->
<div class="field optionsfield">
show initial animation?
<div class="options">
<label for="showfirstrun_yes">
<input type="radio" name="showfirstrun" id="showfirstrun_yes" value="true" checked> yes
</label>
<label for="showfirstrun_no">
<input type="radio" name="showfirstrun" id="showfirstrun_no" value="false"> no
</label>
</div>
</div>
<hr>
<div class="field optionsfield">
nav
<div class="options">
<label for="position_above">
<input type="radio" name="position" id="position_above" value="above" checked> above
</label>
<label for="position_below">
<input type="radio" name="position" id="position_below" value="below"> below
</label>
<label for="position_none">
<input type="radio" name="position" id="position_none" value="none"> none
</label>
</div>
</div>
<div class="field optionsfield">
nav style
<div class="options">
<label for="style_next">
<input type="radio" name="style" id="style_next" value="next" checked> next
</label>
<label for="style_jump">
<input type="radio" name="style" id="style_jump" value="jump"> jump
</label>
<label for="style_thumbnails">
<input type="radio" name="style" id="style_thumbnails" value="thumbnails"> thumbnails
</label>
</div>
</div>
<div class="field textfield" id="navstylefield">
<label for="navseparator">nav separator
<input type="text" name="navseparator" value="/">
</label>
</div>
<div class="group" id="nextgroup">
<hr>
<div class="field textfield">
<label for="previoustext">previous
<input type="text" name="previoustext" value="Previous">
</label>
</div>
<div class="field textfield">
<label for="nexttext">next
<input type="text" name="nexttext" value="Next">
</label>
</div>
<div class="field optionsfield">
show total?
<div class="options">
<label for="showtotal_yes">
<input type="radio" name="showtotal" id="showtotal_yes" value="true"> yes
</label>
<label for="showtotal_no">
<input type="radio" name="showtotal" id="showtotal_no" value="false" checked> no
</label>
</div>
</div>
<div class="field textfield" id="totalseparatorfield">
<label for="totalseparator">total separator
<input type="text" name="totalseparator" value=" of ">
</label>
</div>
<div class="field optionsfield">
include show all?
<div class="options">
<label for="showall_yes">
<input type="radio" name="showall" id="showall_yes" value="true"> yes
</label>
<label for="total_no">
<input type="radio" name="showall" id="showall_no" value="false" checked> no
</label>
</div>
</div>
<div class="group" id="allgroup">
<div class="field textfield">
<label for="alltext">show all
<input type="text" name="alltext" value="Show all">
</label>
</div>
<div class="field textfield">
<label for="onetext">show one
<input type="text" name="onetext" value="Show one">
</label>
</div>
</div> <!-- #allgroup -->
</div> <!-- #nextgroup -->
<div id="jumpgroup">
<hr>
<div class="field optionsfield">
number style
<div class="options">
<label for="numbering_1">
<input type="radio" name="numbering" id="numbering_1" value="1" checked> 1 2 .. 10
</label>
<label for="numbering_01">
<input type="radio" name="numbering" id="numbering_01" value="01"> 01 02 .. 10
</label>
</div>
</div>
</div> <!-- #jumpgroup -->
<hr>
<div class="codeblocks">
<h2 class="toggle" title="toggle" readonly="true">HTML</h2>
<textarea id="htmlcode" class="code"></textarea>
<h2 class="toggle" title="toggle">JSON</h2>
<textarea id="jsoncode" class="code" readonly="true"></textarea>
</div>
</div> <!-- .sideburnsettings -->
<div id="preview">
<!--
why placehold.it?
=================
* Remarkably difficult to find free images that make good test data.
* I need square, landscape, portrait and mixed examples.
* I want to be able to show off the responsive side of things.
* It is handy to be able to test the preloader on non-local images.
-->
<ul class="tabs">
<li><a class="active" href="#square">Square</a></li>
<li><a href="#landscape">Landscape</a></li>
<li><a href="#portrait">Portrait</a></li>
<li><a href="#mixed">Mixed</a></li>
<li><a href="#html">HTML</a></li>
</ul>
<ul class="tabs-content">
<li class="active" id="square">
<ul class="sideburn">
<li><img src="http://placehold.it/600x600.png/AAFF00/ffffff" width="600" height="600"></li>
<li><img src="http://placehold.it/600x600.png/FFAA00/ffffff" width="600" height="600"></li>
<li><img src="http://placehold.it/600x600.png/FF00AA/ffffff" width="600" height="600"></li>
<li><img src="http://placehold.it/600x600.png/AA00FF/ffffff" width="600" height="600"></li>
<li><img src="http://placehold.it/600x600.png/00AAFF/ffffff" width="600" height="600"></li>
</ul>
</li>
<li id="landscape">
<ul class="sideburn">
<li><img src="http://placehold.it/800x600.png/00AAFF/ffffff" width="800" height="600"></li>
<li><img src="http://placehold.it/800x600.png/AAFF00/ffffff" width="800" height="600"></li>
<li><img src="http://placehold.it/800x600.png/FFAA00/ffffff" width="800" height="600"></li>
<li><img src="http://placehold.it/800x600.png/FF00AA/ffffff" width="800" height="600"></li>
<li><img src="http://placehold.it/800x600.png/AA00FF/ffffff" width="800" height="600"></li>
</ul>
</li>
<li id="portrait">
<ul class="sideburn">
<li><img src="http://placehold.it/600x800.png/AA00FF/ffffff" width="600" height="800"></li>
<li><img src="http://placehold.it/600x800.png/00AAFF/ffffff" width="600" height="800"></li>
<li><img src="http://placehold.it/600x800.png/AAFF00/ffffff" width="600" height="800"></li>
<li><img src="http://placehold.it/600x800.png/FFAA00/ffffff" width="600" height="800"></li>
<li><img src="http://placehold.it/600x800.png/FF00AA/ffffff" width="600" height="800"></li>
</ul>
</li>
<li id="mixed">
<ul class="sideburn">
<li><img src="http://placehold.it/600x800.png/AAFF00/ffffff" width="600" height="800"></li>
<li><img src="http://placehold.it/600x600.png/FFAA00/ffffff" width="600" height="600"></li>
<li><img src="http://placehold.it/800x600.png/FF00AA/ffffff" width="800" height="600"></li>
<li><img src="http://placehold.it/600x600.png/AA00FF/ffffff" width="600" height="600"></li>
</ul>
</li>
<li id="html">
<ul class="sideburn">
<li>
<h1><a href="http://hipsteripsum.me/" target="_blank">Hipster Ipsum</a></h1>
<p>Wayfarers tofu williamsburg thundercats, DIY +1 viral beard quinoa. Mcsweeney's DIY wes anderson lomo terry richardson, vice Austin artisan keffiyeh master cleanse letterpress echo park. Fixie scenester brunch carles irony portland. Beard skateboard before they sold out PBR, banksy lo-fi mixtape. Food truck stumptown four loko, scenester cliche photo booth freegan letterpress keytar leggings vice brooklyn wayfarers dreamcatcher etsy. Austin portland locavore, keffiyeh farm-to-table cardigan DIY organic fap. Brooklyn butcher PBR scenester jean shorts.</p>
<p>Cliche 3 wolf moon echo park squid keffiyeh craft beer. Twee fanny pack keffiyeh, trust fund iphone PBR single-origin coffee artisan scenester mlkshk 8-bit vice dreamcatcher. Tofu photo booth yr, +1 quinoa wes anderson farm-to-table jean shorts cred whatever banh mi banksy organic. Butcher fap iphone +1 readymade artisan. Brooklyn gluten-free tattooed letterpress aesthetic, VHS quinoa shoreditch iphone cosby sweater etsy readymade single-origin coffee seitan. Tumblr irony etsy, fanny pack put a bird on it twee keffiyeh biodiesel master cleanse. Irony vegan messenger bag, williamsburg salvia aesthetic vice keytar.</p>
</li>
<li>
<h1><a href="http://slipsum.com/lite.html" target="_blank">Samuel L. Ipsum (lite)</a></h1>
<p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee. </p>
<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb. </p>
</li>
<li>
<h1><a href="http://www.lipsum.com/" target="_blank">Classic Lorem Ipsum</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan urna sit amet dui condimentum sollicitudin. Etiam et gravida eros. Sed non neque et odio molestie condimentum eget eget felis. Sed nibh massa, rhoncus ac porttitor et, facilisis iaculis sem. Vestibulum fringilla dapibus sapien nec euismod. Sed eu orci in elit rhoncus pellentesque nec eu dolor. Nullam ullamcorper dolor at metus suscipit nec consectetur risus sollicitudin. Ut laoreet luctus ullamcorper. Mauris vel libero non diam tristique euismod. Nulla tincidunt magna ut eros hendrerit ut blandit odio elementum. In hac habitasse platea dictumst. Nulla aliquam rhoncus mattis. Aenean vel quam in diam semper mollis nec in nisl. Aliquam ultrices, mi vitae aliquet gravida, mauris dui varius justo, vitae placerat quam arcu et libero.</p>
<p>Praesent ornare augue id turpis venenatis venenatis. Sed at ipsum dui, sit amet blandit nisi. Sed odio eros, volutpat eget luctus ut, sodales non neque. Curabitur vitae magna consequat augue vulputate vestibulum in quis metus. Maecenas vitae tortor sit amet justo suscipit aliquet. Aliquam quis erat est. Nullam vitae lorem tristique quam pellentesque lacinia ac sollicitudin felis. Nam at metus in nisl pellentesque laoreet. Nam venenatis consectetur ipsum, vel viverra lacus convallis id. Aenean magna erat, adipiscing et placerat ut, venenatis sit amet felis. Donec posuere condimentum arcu ut placerat. Nunc felis diam, auctor eget auctor quis, semper a turpis. Praesent magna metus, gravida et blandit eget, tempor non metus.</p>
<p>Integer in augue magna. Pellentesque pulvinar vehicula imperdiet. Morbi adipiscing, enim sed dictum aliquam, felis sapien lobortis metus, feugiat consectetur dolor nisl condimentum metus. Fusce a augue nisl. Vivamus condimentum malesuada facilisis. Sed sapien est, gravida ut dictum et, ullamcorper at urna. Etiam ut metus in eros placerat hendrerit. Donec tristique nunc quis erat accumsan hendrerit. Nullam bibendum dapibus dapibus. Nullam ultrices sollicitudin odio, non congue tortor iaculis a.</p>
<p>Suspendisse sagittis eros eu felis mollis sagittis. Proin lacinia nibh eu nisl interdum feugiat interdum enim egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum consectetur turpis a eros varius sit amet mattis magna sollicitudin. Nullam turpis dui, lacinia at porta interdum, volutpat eget turpis. Nam convallis aliquet purus eget pretium. Donec lectus mi, laoreet eget mollis non, scelerisque sed felis. Donec tincidunt lacus a tellus bibendum vitae condimentum purus consectetur. Donec volutpat tempus massa, sed blandit orci feugiat vel. Sed sagittis viverra odio ut faucibus. In mattis dignissim lacus ac varius. Nullam eget mattis ipsum.</p>
<p>Integer ultricies enim vel ante bibendum gravida. Nulla viverra interdum hendrerit. Vivamus vitae libero justo, a vehicula urna. Nullam tincidunt ipsum sed quam posuere molestie. Integer commodo tincidunt sapien at blandit. Vivamus leo tellus, consectetur molestie facilisis quis, commodo at nibh. Nam eu purus sed tortor euismod ornare. Donec tincidunt enim id ante pellentesque lobortis. Sed laoreet odio in arcu tincidunt sit amet ullamcorper odio varius.</p>
</li>
</ul>
</li>
</ul>
</div> <!-- #preview -->
</div> <!-- .wrap -->
</div> <!-- #stage -->
<div id="documentation">
<h1>Documentation</h1>
<p>Sideburn receives all the settings from data attributes on the <ul>
element. This allows different slideshows in the page to have different
settings. It is also much more flexible than using CSS classes to handle
configuration. A CMS can add the settings inline and then all you need for your
slideshows to work is something like:</p>
<pre class="code">$(document).ready(function() {
$('ul.sideburn').sideburn(); // see? no configuration required here
});</pre>
<p>Sideburn has some special support to help responsive / fluid
layouts: It preloads images and "hardcodes" the elements' width whenever the
window resizes. This helps because typically the elements are absolutely
positioned and images inside them will likely have
<code>max-width: 100%;</code> and <code>height: auto;</code> set so that the
browser can resize them to fit.</p>
<p>Resize your browser to see the demo adapt to the available width.</p>
<h2>Settings</h2>
<h3>speed</h3>
<p>Time the transition will take to complete in milliseconds.
The default is <code>500</code>.</p>
<h3>transition</h3>
<p>Name of the transition effect. Possible values are:</p>
<ul>
<li><code>fade</code></li>
<li><code>slide-left</code></li>
<li><code>slide-right</code></li>
<li><code>slide-left-right</code></li>
<li><code>slide-left-right-wrap</code> (the default)</li>
<li><code>slide-up</code></li>
<li><code>slide-down</code></li>
<li><code>slide-up-down</code></li>
<li><code>slide-up-down-wrap</code></li>
</ul>
<h3>timeout</h3>
<p>Time between automatic transitions in milliseconds.
The default is <code>0</code> which means "autoplay" is disabled.</p>
<h3>start</h3>
<p>Zero-based index of the first element to show.
This defaults to <code>0</code> - the first element.
Alternatively you can add <code>class="start"</code> to the element you want
to be first.
(The demo uses that so that it doesn't jump back to the first one every time
you change settings.)</p>
<h3>showfirstrun</h3>
<p>Sideburn always preloads images. If it had to preload images this will make
it fade in the first one. With showfirstrun disabled it will just appear
immediately without animating. The first run animation is different from the
normal transition because there is no "previously shown" element to transition
from. If it doesn't have to preload images (because the images are already
cached) then it never enters the loading state in the first place. This
defaults to <code>false</code>.</p>
<h3>nav</h3>
<p>A JSON object. To disable navigation this can be omitted entirely.
It has the following keys:</p>
<h4>position</h4>
<p>This is either <code>above</code> or <code>below</code>.</p>
<h4>style</h4>
<p><code>next</code>, <code>jump</code> or <code>thumbnails</code>.
Next means the next/previous style nav,
jump is for the numbered nav (it is easy to replace in CSS with dots) and
thumbnails is for thumbnails that also jump straight to the image.
Thumbnails only supports image-only content.
The default is <code>next</code>.</p>
<h4>navSeparator</h4>
<p>Text content for the separator span tag when using next or jump
style nav. It defaults to <code>/</code>. It should be easy to replace with
an image in CSS.</p>
<h4>nextText</h4>
<p>The text button/link for the next element. For next style nav only.
Defaults to <code>Next</code>.</p>
<h4>previousText</h4>
<p>The text button/link for the previous element. For next style nav only.
Defaults to <code>Previous</code>.</p>
<h4>showTotal</h4>
<p>If this is true, then the current position and total (ie. 1 of 10) will be
added to the nav. For next style nav only. Defaults to <code>false</code>.</p>
<h4>totalSeparator</h4>
<p>Text content for the separator span tag between the current and total
numbers. This only applies when you have showTotal set to true.
It defaults to <code> of </code>. It should be easy to replace with an image
in CSS.</p>
<h4>showAll</h4>
<p>If this is true, then there will be a link/button in the next nav to toggle
between showing all the items or just one. Defaults to <code>false</code>.</p>
<h4>allText</h4>
<p>The text button/link for entering show all.
Defaults to <code>Show all</code>.</p>
<h4>oneText</h4>
<p>The text button/link for entering show one.
Defaults to <code>Show one</code>.</p>
<h4>numbering</h4>
<p>For jump style nav only. Set to <code>1</code> if you want 1 2 3 .. 9 10 or
<code>01</code> if you want 01 02 03 .. 09 10.</p>
<h2>Methods</h2>
<h3>$('ul.sideburn').sideburn("destroy");</h3>
<p>Remove the elements, data attributes and event handlers added by sideburn.
Used by the demo before applying the new settings.</p>
<h3>$('ul.sideburn').sideburn("refresh");</h3>
<p>Sometimes it is necessary to tell sideburn to recalculate its dimensions.
For example: If it was hidden when the window got resized it won't pick up the
new dimensions unless you manually tell it to refresh. If your slideshows are
always visible you wouldn't have to do this.</p>
<h3>$('ul.sideburn').sideburn("next");</h3>
<p>Move to the next item. (Same as clicking on the next link.)</p>
<h3>$('ul.sideburn').sideburn("previous");</h3>
<p>Move to the previous item. (Same as clicking on the previous link.)</p>
<h3>$('ul.sideburn').sideburn("jump", "id");</h3>
<p>Move to the item with the specified id. (Similar to clicking on jump nav.)</p>
<hr>
<p class="footer">Get the code and more info at <a href="http://github.com/thisarmy/sideburn">http://github.com/thisarmy/sideburn</a>.</p>
</div> <!-- #documentation -->
</body>
</html>