forked from cethap/Sequence
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdocumentation.html
1038 lines (917 loc) · 44.8 KB
/
documentation.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
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Sequence.js - Documentation</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<link href="http://fonts.googleapis.com/css?family=Magra:400,700|Telex" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" media="screen" href="css/sequencejs-theme.dev.how-it-works.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined'){
document.write(unescape("%3Cscript src='scripts/jquery.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" src="scripts/sequence.jquery-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var options = {
startingFrameID: 1,
autoPlay: true,
autoPlayDirection: 1,
animatestartingFrameIn: false,
autoPlayDelay: 5000,
pauseOnHover: true,
pauseIconSrc: "images/pause-icon.png",
keysNavigate: true,
delayDuringOutInTransitions: 1000,
touchEnabled: true,
swipeThreshold: 15,
fallbackTheme: {
speed: 500
},
beforeCurrentFrameAnimatesIn: function(){
if(sequence.direction == 1){
changeText(sequence.nextFrameID, "");
}else{
changeText(sequence.nextFrameID, ".animate-out");
}
},
beforeCurrentFrameAnimatesOut: function(){
if(sequence.direction == 1){
changeText(sequence.currentFrameID, ".animate-out");
}else{
changeText(sequence.currentFrameID, "");
}
},
beforeNextFrameAnimatesIn: function(){
changeText(sequence.currentFrameID, ".animate-in");
}
};
var sequence = $("#sequence").sequence(options).data("sequence");
function changeText(id, text){
$("#sequence ul li:nth-child("+id+")").children().children(".sequence-class").text(text);
}
})
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-11991680-3']);
_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);
})();
</script>
</head>
<body id="documentation">
<div id="header">
<a class="logo" href="http://www.sequencejs.com/" title="Sequence.js"><img src="images/sequence-logo.png" alt="Sequence.js" /></a>
<ul id="social">
<li>Twitter</li>
<li>RSS</li>
<li>Contact</li>
</ul>
<ul id="nav">
<li><a href="themes.html" title="Themes">Themes</a></li>
<li><a href="blog/" title="Blog">Blog</a></li>
<li><a href="documentation.html" title="Documentation">Documentation</a></li>
<li><a class="link-button" href="https://github.com/IanLunn/Sequence" title="Download from GitHub">Download Beta</a></li>
</ul>
</div>
<div id="content">
<div class="aside left">
<ol>
<li><a href="#basic-setup" title="Basic Setup">Basic Setup</a>
<ol>
<li><a href="#add-files" title="Add Files">Add Files</a></li>
<li><a href="#initiate" title="Initiate Sequence">Initiate Sequence</a></li>
<li><a href="#add-html" title="Add HTML">Add an HTML Slider</a></li>
<li><a href="#add-content" title="Add Content">Add some Content</a></li>
<li><a href="#no-js" title="Setup a No-JS Fallback">Setup a No-JS Fallback</a></li>
</ol>
<li><a href="#animated-theme" title="Creating an Animated Theme">Creating an Animated Theme</a>
<ol>
<li><a href="#sequence-container" title="Setting up the Sequence Container and Frames">Setting up a Container and Frames</a></li>
<li><a href="#sequence-animations" title="How Sequence's Animations Work">How Sequence's Animations Work</a></li>
<li><a href="#animating-backwards" title="Animating Backwards">Animating Backwards</a></li>
<li><a href="#animating-transitions" title="Animating Using CSS3 Transitions">Animating Using CSS3 Transitions</a></li>
<li><a href="#animating-examples" title="Animation Examples">Animation Examples</a></li>
</ol>
</li>
<li><a href="#developers" title="Developer's Options">Developer's Options</a>
<ol>
<li><a href="#options" title="Options">Options</a>
<ol>
<li><a href="#options-list" title="List of Options">List of Options</a></li>
<li><a href="#options-fallback" title="Fallback Theme Options">Fallback Theme Options</a></li>
</ol>
</li>
<li><a href="#callbacks" title="Callbacks">Callbacks</a>
<ol>
<li><a href="#callbacks-list" title="List of Callbacks">List of Callbacks</a></li>
<li><a href="#callbacks-using" title="Using Callbacks">Using Callbacks</a></li>
</ol>
</li>
<li><a href="#methods" title="Public Methods">Public Methods</a>
<ol>
<li><a href="#methods-functions" title="Public Functions">Public Functions</a></li>
<li><a href="#methods-variables" title="Public Variables">Public Variables</a></li>
</ol>
</li>
</ol>
</li>
<li><a href="#tips-tricks" title="Tips and Tricks">Tips and Tricks</a>
<ol>
<li><a href="#tips-prefixing" title="Vendor Prefixing">Vendor Prefixing</a></li>
</ol>
</li>
</ol>
</div>
<div class="main">
<h1 id="documentation">Documentation</h1>
<h2 id="basic-setup">Basic Set Up</h2>
<h3 id="add-files">Add Files</h3>
<p>Place a link to jQuery and the sequence.js file in the <code><head></code> of your document:</p>
<pre><code><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/sequence.js"></script></code></pre>
<h3 id="initiate">Initiate Sequence</h3>
<p>Once you’ve added the necessary files for Sequence, within the <code><head></code> of your document, inititate an instance of Sequence like so:</p>
<pre><code><script type="text/javascript">
$(document).ready(function(){
var sequence = $("#sequence").sequence(options).data("sequence");
}
</script></code></pre>
<p>Let’s break this down:</p>
<p>Firstly, we are saving an instance of Sequence into a variable (“var”) called <code>sequence</code>. The variable name is entirely up to you and, if necessary, will allow us to interact with Sequence via custom JavaScript which is explained in the <a href="#developers" title="Developer's Options">Developer Option’s</a>.</p>
<p>After the variable name, we specify a jQuery selector <code>$("#sequence")</code>, which is the element we want to act as the Sequence container. We will create a <code>div</code> in the HTML shortly with an ID of “sequence”.</p>
<p>The Sequence function (<code>.sequence(options)</code>), will accept many options that allow for modifying how Sequence works. These options are explained in the <a href="#developers" title="Developer's Options">Developer Option’s</a> section. If options are not specified, Sequence will rely on its default settings.</p>
<p>It is possible to place multiple instances of Sequence on the same page, like so:</p>
<pre><code><script type="text/javascript">
$(document).ready(function(){
var sequence = $("#sequence").sequence(options).data("sequence");
var sequence2 = $("#sequence2").sequence(options2).data("sequence2");
}
</script></code></pre>
<h3 id="add-html">Add an HTML Slider</h3>
<p>Add Sequence’s simple HTML structure like so:</p>
<pre><code><div id="sequence">
<ul>
<li>
<!--Frame 1 content here-->
</li>
<li>
<!--Frame 2 content here-->
</li>
<li>
<!--Frame 3 content here-->
</li>
</ul>
</div></code></pre>
<p>Sequence consists of a container (a div with a unique ID) and an unordered list. Sequence refers to each list item within that unordered list as a “frame”. Frames hold the content of your Sequence slider.</p>
<h3 id="add-content">Add Content</h3>
<p>To add content to a frame, simply put HTML within each list item:</p>
<pre><code><div id="sequence">
<ul>
<li>
<div class="info1">
<p>Frame 1</p>
</div>
</li>
<li>
<div class="info2">
<p>Frame 2</p>
</div>
</li>
<li>
<div class="info3">
<p>Frame 3</p>
</div>
</li>
</ul>
</div> </code></pre>
<p>Here we’ve added a <code>div</code> to each frame with unique classes. We will shortly write some CSS that will allow each <code>div</code> to animate in and out of the Sequence container.</p>
<p>Note that each frame can contain as many elements as necessary but only first level elements will be animated by Sequence.</p>
<h3 id="no-js">Setup a No-JavaScript Fallback</h3>
<p>In a small percentage of browsers, JavaScript may be disabled which is the technology Sequence is built upon. To prevent an empty container from showing, nominate a frame to be displayed by giving each of its content elements a class of “animate-in”:</p>
<pre><code><div id="sequence">
<ul>
<li>
<div class="info1 animate-in">
<p>Frame 1 information</p>
</div>
<img class="my-image animate-in" src="my-image.jpg" alt="An image of me" />
</li>
<li>
<div class="info2">
<p>Frame 2 information</p>
</div>
</li>
<li>
<div class="info3">
<p>Frame 3 information</p>
</div>
</li>
</ul>
</div></code></pre>
<p>Here we’ve nominated the first frame to be displayed if JavaScript is disabled. I’ve added an image to the first frame to demonstrate that each content element within the nominated frame should be given the “animate-in” class.</p>
<h2 id="animated-theme">Creating an Animated Theme using CSS3</h2>
<h3 id="sequence-container">Setting up the Sequence Container and Frames</h3>
<p>Let’s start by styling our Sequence container:</p>
<pre><code>#sequence{
border: black solid 3px;
height: 370px;
margin: 40px auto;
position: relative;
width: 450px;
}</code></pre>
<p>Here we’ve given the container some basic dimensional properties and a border. We’ve also given the container a relative position. This is an important property as all of the content elements with a Sequence slider will be given an absolute position, like so:</p>
<pre><code>#sequence li > *{
position: absolute;
}</code></pre>
<p>This way, when we come to position elements with the Sequence container, a position top of 0 pixels will be the top of the Sequence container, and a position left of 0 pixels will be the left hand side of the Sequence container.</p>
<h3 id="sequence-animations">How Sequence’s Animations Work</h3>
<p>Each first level element within a frame will be animated by Sequence, but how that animation happens is entirely your choice and created using <a href="http://css3.bradshawenterprises.com/transitions/" title="An explanation of CSS3 transitions">CSS3 transitions</a>. By default, Sequence initially displays the first frame’s content, so let’s start by animating the first element from our example above.</p>
<p>In the HTML, we’ve given the <code>div</code> a class of “info1” and made sure it will be displayed in the absence of JavaScript by also giving it a class of “animate-in”.</p>
<p>Should JavaScript be enabled (in almost all cases it will be), Sequence will begin by removing the “animate-in” class. So the HTML will look like this:</p>
<pre><code><div class="info1">
<p>Frame 1</p>
</div></code></pre>
<p>This element is in its “start” position. Sequence will automatically add a class of “animate-in” to it, which will trigger the CSS3 transitions we will shortly write. The HTML will look like this:</p>
<pre><code><div class="info1 animate-in">
<p>Frame 1</p>
</div></code></pre>
<p>When the “animate-in” position is reached, Sequence will then remove the “animate-in” class, and add a class of “animate-out”, which again, we can control via CSS3 transitions. The HTML will look like this:</p>
<pre><code><div class="info1 animate-out">
<p>Frame 1</p>
</div></code></pre>
<p>When the “animate-out” position is reached, Sequence will then start automatically applying these transitional phases to the next frames elements. Once the last frame’s elements have reached the “animate-out” position, Sequence will go back to the first frame, remove the “animate-out” class (reseting the element to it’s starting position), and the whole process will continue indefinetly.</p>
<figure>
<div id="sequence" class="sequence">
<ul>
<li>
<div class="info1 animate-in">
<p class="class">.info1</p>
<p class="sequence-class">.animate-in</p>
</div>
</li>
<li>
<div class="info2">
<p class="class">.info2</p>
<p class="sequence-class"></p>
</div>
</li>
<li>
<div class="info3">
<p class="class">.info3</p>
<p class="sequence-class"></p>
</div>
</li>
</ul>
</div>
<figcaption>An instance of Sequence demonstrating how/when the transitional classes are applied (use arrow keys to navigate)</figcaption>
</figure>
<h3 id="animating-backwards">Animating Backwards</h3>
<p>Sequence contains options that allow for a user to control the animation of frames using next/previous buttons, the keyboard left/right arrow keys or swiping on touch devices (version 1.0 onwards). You can also make Sequence play in reverse via the <a href="#developers">developer options</a>. Sequence will apply the above mentioned transitional phase classes in reverse.</p>
<p>Let’s assume frame 2 has one element that is currently in the “animate-in” position. If a user were to click a “previous” button, Sequence would remove the “animate-in” class, resetting the element to its starting position and the previous frame’s element (frame 1), would be given the class of “animate-out” (reseting it to the “animate-out” position), followed by a class of “animate-in” to then make it transition into its “animate-in” position.</p>
<h3 id="animating-transitions">Animating Frame Elements using CSS3 Transitions</h3>
<p>Now we know how Sequence works, we can manipulate the transition of frame elements using CSS3 transitions. Just before we begin adding transitional properties, let’s style the <code>div</code> within each frame:</p>
<pre><code>.info1, .info2, .info3{
background: #3f7ad6;
color: white;
height: 95px;
padding: 5px;
width: 95px;
}</code></pre>
<p>We’ve made each <code>div</code> 95px wide and tall and given them a background colour. Now, let’s begin applying transitional properties:</p>
<pre><code>.info1{
left: -150px;
top: 10px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
transition-duration: 1s;
}</code></pre>
<p>Remember that an element with no transitional phase class is in its “start” position. We’ve started this element 150px outside of the Sequence container (to the left), and 10px from the top.</p>
<p><em>Note #1</em>: we’ve given the element a transition duration but, this is NOT the duration it will take to go from the “start” position to the “animate-in” position. Instead, it is the duration it will take to go from the “animate-in” position to the “start” position when Sequence is <a href="#animating-backwards">animating backwards</a>.</p>
<p><em>Note #2</em>: Sequence has been built to work across all modern browsers which means it is necessary to use <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords" title="Vendor Prefixes Explained">vendor prefixes</a> for CSS3 attributes such as <code>transition-duration</code>. Please see the <a href="#tips-prefixing" title="Vendor Prefixing">Vendor Prefixing Tips</a> section for advice on how to make using vendor prefixes as easy as possible.</p>
<p>As we saw in <a href="#sequence-animations" title="How Sequence's Animations Work">How Sequence’s Animations Work</a>, Sequence will add a class of “animate-in” to any active frame elements to make it transition to its “animate-in” position. So, let’s style the transition between the “start” and “animate-in” positions:</p>
<pre><code>.info1.animate-in{
left: 165px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
transition-duration: 1s;
}</code></pre>
<p>We’ve made it so that the <code>div</code> with class “info1”, will move from its “start” position of <code>left: -150px</code>, to <code>left: 165px</code>. We haven’t specified a top position so that will remain the same as the “start” position (<code>top: 10px</code>). By adding a transition-duration, the time it will take to go between the “start” and “animate-in” positions will be 1 second (1s). Again, we’ve used vendor prefixes to make the theme work across all modern browsers.</p>
<pre><code>.info1.animate-out{
left: 500px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
transition-duration: 1s;
}</code></pre>
<p>Once all of the frame’s elements have finished animating in, Sequence will then change the “animate-in” class to “animate-out”. As we did with the “animate-in” transition, we’ve changed the left value to make the element move outside of the Sequence container and specified a 1 second transition duration.</p>
<p>From here on, we can apply transition durations to the remaining elements within the second and third frame. For the purpose of this demo and the sake of simplicity, we can modify the CSS we’ve just written to apply the same transition durations to the other frame elements, like so:</p>
<pre><code>.info1, .info2, .info3{
left: -150px;
top: 10px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
transition-duration: 1s;
}</code></pre>
<p>Here we’ve given start positions to the <code>div</code> elements within the second and third frames.</p>
<pre><code>.info2{
top: 130px;
}
.info3{
top: 250px;
}</code></pre>
<p>This CSS overwrites the top positions for each element so one is positioned below the next.</p>
<pre><code>.info1.animate-in, .info2.animate-in, .info3.animate-in{
left: 165px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
transition-duration: 1s;
}
.info1.animate-out, .info2.animate-out, .info3.animate-out{
left: 500px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
transition-duration: 1s;
} </code></pre>
<p>And finally we’ve included the second and third <code>div</code> elements in our “animate-in” and “animate-out” transitional positions.</p>
<p>What we’ve learnt in this demonstration are the basics to creating an animated theme for Sequence. You should now be able to create your own theme. Keep reading though, Sequence boasts even more useful features to help you make a truly amazing and unique theme.</p>
<h3 id="animating-examples">Transitional CSS Examples</h3>
<p>When specifying properties for transitional classes, in most cases you will use a transition-duration (unless you just want frame elements to immediately snap to the next/previous phase) but the remaining properties to transition between are entirely up to you. In this demo, we’ve only transitioned between numerous <code>left</code> properties, making an element move in and out of a Sequence container. Here’s just a few more examples you may like to experiment with:</p>
<p>Coming soon</p>
<h2 id="developers">Developer’s Options</h2>
<h3 id="options">Options</h3>
<p>Sequence comes with many options that allow you to easily control its features.</p>
<h4 id="options-specifying">Specifying Options</h4>
<p>As explained in <a href="#initiate" title="Initiate a Sequence Slider">Initiate a Sequence Slider</a>, each instance of a Sequence slider can be passed developer defined options that override Sequence’s default settings. Options are stored in an object passed to the <code>.sequence()</code> function, like so:</p>
<pre><code><script type="text/javascript">
$(document).ready(function(){
var options = {
autoPlay: true,
autoPlayDelay: 3000
}
var sequence = $("#sequence").sequence(options).data("sequence");
}
</script></code></pre>
<p>Multiple instances of Sequence can be passed the same options:</p>
<pre><code><script type="text/javascript">
$(document).ready(function(){
var options = {
autoPlay: true,
autoPlayDelay: 3000
}
var sequence = $("#sequence").sequence(options).data("sequence");
var sequence2 = $("#sequence2").sequence(options).data("sequence2");
}
</script></code></pre>
<p>Or differing options:</p>
<pre><code><script type="text/javascript">
$(document).ready(function(){
var options = {
autoPlay: true,
autoPlayDelay: 3000
}
var options2 = {
autoPlay: true,
autoPlayDelay: 5000
}
var sequence = $("#sequence").sequence(options);
var sequence2 = $("#sequence2").sequence(options2);
}
</script></code></pre>
<h3 id="options-list">List of Options</h3>
<p>The following is the complete set of options implemented within Sequence:</p>
<table>
<thead>
<tr>
<td>Option Name</td>
<td>Value</td>
<td>Default</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>nextButton</td>
<td>true/false or a CSS selector</td>
<td>false</td>
<td>A CSS selector that, when clicked, causes the current frame to animate out and the next to animate in.<br /><br /><strong>true</strong>: use the default CSS selector (".next") <br /><strong>false</strong>: don't use a button</td>
</tr>
<tr>
<td>prependNextButton</td>
<td>true/false or a CSS selector</td>
<td>false</td>
<td>If nextButton is true, specify which element to prepend the nextButton to.<br /><br />
<strong>true</strong>: automatically prepend to the Sequence container<br />
<strong>false</strong>: don't automatically prepend (when you want to manually add the button via HTML)<br />
<strong>CSS Selector</strong>: Specify a CSS Selector to automatically prepend the nextButton to</td>
</tr>
<tr>
<td>nextButtonSrc</td>
<td>A path to an image</td>
<td>"images/bt-next.png"</td>
<td>If prependNextButton is true or a CSS selector, specify a path to the next button image</td>
</tr>
<tr>
<tr>
<td>nextButtonAlt</td>
<td>A string</td>
<td><pre>"&#gt;"</pre></td>
<td>If prependNextButton is true or a CSS selector, specify alt text for the next button image</td>
</tr>
<tr>
<td>showNextButtonOnInit</td>
<td>true/false</td>
<td>true</td>
<td>By default, the next button will be shown when Sequence is initiated. Set this to false should you wish for it to be hidden on initiation (you may like to do this to fade the button in using CSS for example)</td>
</tr>
<tr>
<td>prevButton</td>
<td>true/false or a CSS selector</td>
<td>false</td>
<td>A CSS selector that, when clicked, causes the current frame to animate out and the previous to animate in.<br /><br /><strong>true</strong>: use the default CSS selector (".prev")<br />
<strong>false</strong>: don't use a button</td>
</tr>
<tr>
<td>prependPrevButton</td>
<td>true/false or a CSS selector</td>
<td>false</td>
<td>If prevButton is true, specify which element to prepend the prevButton to.<br /><br />
<strong>true</strong>: automatically prepend to the Sequence container<br />
<strong>false</strong>: don't automatically prepend (when you want to manually add the button via HTML)<br />
<strong>CSS Selector</strong>: Specify a CSS Selector to automatically prepend the prevButton to</td>
</tr>
<tr>
<td>prevButtonSrc</td>
<td>A path to an image</td>
<td>"images/bt-prev.png"</td>
<td>If prependPrevButton is true or a CSS selector, specify a path to the previous button image</td>
</tr>
<tr>
<tr>
<td>prevButtonAlt</td>
<td>A string</td>
<td><pre>"&#lt;"</pre></td>
<td>If prependPrevButton is true or a CSS selector, specify alt text for the previous button image</td>
</tr>
<tr>
<td>showPrevButtonOnInit</td>
<td>true/false</td>
<td>true</td>
<td>By default, the previous button will be shown when Sequence is initiated. Set this to false should you wish for it to be hidden on initiation (you may like to do this to fade the button in using CSS for example)</td>
</tr>
<tr>
<td>startingFrameID</td>
<td>A number</td>
<td>1</td>
<td>The frame that should first be displayed when Sequence loads.</td>
</tr>
<tr>
<td>autoPlay</td>
<td>true/false</td>
<td>true</td>
<td><strong>true</strong>: Sequence will automatically animate from frame to frame with a delay between each frame (specified using the autoPlayDelay setting)<br />
<strong>false</strong>: Sequence will display the starting frame until a user chooses to navigate Sequence using next/previous buttons/swiping etc.
</td>
</tr>
<tr>
<td>autoPlayDelay</td>
<td>A number in milliseconds</td>
<td>5000</td>
<td>If using autoPlay, the speed at which frames should remain on screen before animating to the next.</td>
</tr>
<tr>
<td>autoPlayDirection</td>
<td>1/-1</td>
<td>1</td>
<td>If using autoPlay, the direction in which Sequence should play.<br /><br />
<strong>1</strong>: Forward<br />
<strong>-1</strong>: Reverse
</td>
</tr>
<tr>
<td>cycle</td>
<td>true/false</td>
<td>true</td>
<td>Whether or not Sequence should go to the first frame when a user navigates forward from the last frame. Likewise, whether Sequence should go to the last frame when a user navigates in reverse from the first frame.
</td>
</tr>
<tr>
<td>pauseOnHover</td>
<td>true/false</td>
<td>true</td>
<td>If using autoPlay, whether frames should stop auto playing when the user hovers over Sequence. autoPlay will continue again when the user moves their cursor outside of Sequence.</td>
</tr>
<tr>
<td>pauseOnElementsOutsideContainer</td>
<td>true/false</td>
<td>false</td>
<td>Whether or not Sequence should pause when the user hovers over one of its child elements outside of the Sequence container</td>
</tr>
<tr>
<td>pauseIcon</td>
<td>true/false or a CSS selector</td>
<td>false</td>
<td>If using autoPlay, display a pause icon when the user hovers over Sequence.<br /><br />
<strong>true</strong>: use the default pause icon CSS selector (".pause-icon")<br />
<strong>false</strong>: don't display a pause icon<br />
<strong>A CSS Selector</strong>: Specify a CSS selector to an HTML element you have manually added to the document
</td>
</tr>
<tr>
<td>prependPauseIcon</td>
<td>true/false or a CSS selector</td>
<td>true</td>
<td>If pauseIcon is true, specify which element to prepend the pauseIcon to.<br /><br />
<strong>true</strong>: automatically prepend to the Sequence container<br />
<strong>false</strong>: don't automatically prepend (when you want to manually add the pause icon via HTML)<br />
<strong>CSS Selector</strong>: Specify a CSS Selector to automatically prepend the pauseIcon to</td>
</tr>
<tr>
<td>pauseIconSrc</td>
<td>A path to an image</td>
<td>"images/pause-icon.png"</td>
<td>If prependPauseIcon is true or a CSS selector, specify a path to the pause icon image</td>
</tr>
<tr>
<td>animateStartingFrameIn</td>
<td>true/false</td>
<td>false</td>
<td><strong>true</strong>: The starting frame will begin in its "start" position and move to its "animate-in" position when Sequence loads<br />
<strong>false</strong>: The starting frame will begin in its "animate-in" position when Sequence loads
</td>
</tr>
<tr>
<td>delayDuringOutInTransitions</td>
<td>true/false or a number in milliseconds</td>
<td>1000</td>
<td>Whether or not there should be a delay between a frame animating out and the next animating in.<br /><br />
<strong>true</strong>: the next frame will not animate in until the current frame has completely animated out<br />
<strong>false</strong>: the next frame will animate in at the same time as the current frame animating out<br />
<strong>A number</strong>: The amount of milliseconds to wait after animating the current frame out, before the next frame is animated in
</td>
</tr>
<tr>
<td>preloader</td>
<td>true/false or a CSS Selector</td>
<td>true</td>
<td>
<strong>true</strong>: Use the default preloader and styles<br />
<strong>false</strong>: don't use a preloader<br />
<strong>CSS Selector</strong>: Specify a CSS Selector to use as the preloader<br /><br />
If true, the following default preloading styles will be applied to the document:
<pre><code>#sequence-preloader{
height: 100%;
position: absolute;
width: 100%;
z-index: 999999;
}
@-*-keyframes preload {
0%{
opacity: 0;
}
50%{
opacity: 1;
}
100%{
opacity: 0;
}
}
#sequence-preloader img{
background: #ff9933;
border-radius: 6px;
display: inline-block;
height: 12px;
opacity: 0;
position: relative;
top: -50%;
width: 12px;
-*-animation: preload 1s infinite;
}
.preloading{
height: 12px;
margin: 0 auto;
top: 50%;
position: relative;
width: 48px;
}
#sequence-preloader img:nth-child(2){
-*-animation-delay: .15s;
}
#sequence-preloader img:nth-child(3){
-*-animation-delay: .3s;
}
.preloading-complete{
opacity: 0;
visibility: hidden;
-*-transition-duration: 1s;
}</code></pre>
</td>
</tr>
<tr>
<td>prependPreloader</td>
<td>true/false or a CSS Selector</td>
<td>true</td>
<td>If preloader is true, specify which element to prepend the preloader to.<br /><br />
<strong>true</strong>: automatically prepend to the Sequence container<br />
<strong>false</strong>: don't automatically prepend (when you want to manually add the preloader via HTML)<br />
<strong>CSS Selector</strong>: Specify a CSS Selector to automatically prepend the preloader to</td>
</tr>
<tr>
<td>hidePreloaderUsingCSS</td>
<td>true/false</td>
<td>true</td>
<td>If true, Sequence will add a CSS class of "preloading-complete" to the preloader, allowing you to hide that preloader using a CSS3 transition. Example:
<pre><code>.preloading-complete{
display: none;
opacity: 0;
visibility: hidden;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-opera-transition-duration: 1s;
-ms-transition-duration: 1s;
transition-duration: 1s;
}</code></pre>
The above CSS will cause the preloader element to fade out over a 1 second duration and then become "hidden".
</td>
</tr>
<tr>
<td>hidePreloaderDelay</td>
<td>A number in milliseconds</td>
<td>0</td>
<td>If hidePreloaderUsingCSS is true, the number of milliseconds to wait after the preloader has been hidden before initiating the first animation.</td>
</tr>
<tr>
<td>keysNavigate</td>
<td>true/false</td>
<td>true</td>
<td>Whether to allow the user to navigate between frames using the left and right arrow keys</td>
</tr>
<tr>
<td>reverseAnimationsWhenNavigatingBackwards</td>
<td>true/false</td>
<td>true</td>
<td>Whether animations should be reversed when a user navigates backwards by clicking a previous button/swiping/pressing the left key<br /><br />
<strong>true</strong>: when navigating backwards, Sequence will animate the preceding frame from its "animate-out" position to its "animate-in" position (creating a reversed animation)<br />
<strong>false</strong>: when navigating backwards, Sequence will animate the preceding frame from its "start" position to its "animate-in" position (as it does when navigating forwards)</td>
</tr>
<tr>
<td>touchEnabled</td>
<td>true/false</td>
<td>true</td>
<td><strike>Whether to allow the user to navigate between frames by swiping left and right on touch enabled devices</strike> Coming in version 1.0</td>
</tr>
<tr>
<td>swipeThreshold</td>
<td>A number</td>
<td>15</td>
<td><strike>The percentage size of the Sequence container the user's finger must move before a swipe event is triggered</strike> Coming in version 1.0</td>
</tr>
<tr>
<td>fallbackTheme</td>
<td>A JavaScript object containing more options</td>
<td><a href="#options-fallback" title="Fallback Theme Options">See Fallback Theme Options</a></td>
<td>Settings for the fallback theme when a browser does not support CSS3 transitions. Please see <a href="#options-fallback" title="Fallback Theme Options">Fallback Theme Options</a> for more information</td>
</tr>
</tbody>
</table>
<h3>Fallback Theme Options</h3>
<p>The fallback theme options control Sequence when it is being viewed in browsers that do not support CSS3 transitions. When in these browsers, Sequence will fallback to a theme that animates each frames opacity -- fading in and out of frames.</p>
<p>More fallback themes and options will be made available with future releases of Sequence.</p>
<h4 id="options-fallback">Complete List of Fallback Theme Options</h4>
<table>
<thead>
<tr>
<td>Option Name</td>
<td>Value</td>
<td>Default</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>speed</td>
<td>A number in milliseconds</td>
<td>500</td>
<td>The speed at which frames should transition when in a browser that does not support CSS3 transitions</td>
</tr>
</tbody>
</table>
<h4>Specifying Fallback Theme Options</h4>
<p>Fallback theme options are included in the options of each instance of Sequence, like so:</p>
<pre><code><script type="text/javascript">
$(document).ready(function(){
var options = {
fallbackTheme: {
speed: 500
}
}
var sequence = $("#sequence").sequence(options).data("sequence");
}
</script></code></pre>
<h3 id="callbacks">Callbacks</h3>
<p>Callbacks allow you to execute custom JavaScript functions during specific periods of Sequence's transitions.</p>
<h4 id="callbacks-list">Compete List of Callbacks</h4>
<p>The following is the complete set of callbacks implemented within Sequence:</p>
<table>
<thead>
<tr>
<td>Callback</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>beforeCurrentFrameAnimatesIn</td>
<td>Executes before the current frame begins to animate in</td>
</tr>
<tr>
<td>beforeCurrentFrameAnimatesOut</td>
<td>Executes before the current frame begins to animate out</td>
</tr>
<tr>
<td>beforeNextFrameAnimatesIn</td>
<td>Executes before the next frame begins to animate in</td>
</tr>
<tr>
<td>afterNextFrameAnimatesIn</td>
<td>Executes after the next frame has animated in (and becomes the current frame)</td>
</tr>
<tr>
<td>afterPreload</td>
<td>Executes after Sequence has preloaded</td>
</tr>
</tbody>
</table>
<h4 id="callbacks-using">Using Callbacks to Execute Custom Functions</h4>
<p>Callbacks are included in the options of each instance of Sequence, like so:</p>
<pre><code><script type="text/javascript">
$(document).ready(function(){
var options = {
autoPlay: true,
autoPlayDelay: 3000,
beforeCurrentFrameAnimatesIn: function(){
alert("Do something before the CURRENT frame animates in"); //you can add the code to execute here...
},
beforeNextFrameAnimatesIn: function(){
myCustomFunction(); //...or specify a function
}
}
var sequence = $("#sequence").sequence(options).data("sequence");
}
function myCustomFunction(){
alert("Do something before the NEXT frame animates in");
}
</script></code></pre>
<h3 id="methods">Public Methods</h3>
<p>Public methods are the functions and options that Sequence utilises, made available for developers to extend and enhance their particular implementation of it.</p>
<h4 id="methods-functions">Public Functions</h4>
<table>
<thead>
<tr>
<td>Function Name</td>
<td>Description</td>
<td>Arguments</td>
<td>Example</td>
</tr>
</thead>
<tbody>
<tr>
<td>goTo(id, direction)</td>
<td>Causes Sequence to animate to a specific frame</td>
<td><strong>id</strong> (required): a number corresponding to a frame (the first frame has an id of 1). <br /><br />
<strong>direction</strong> (optional): Whether the frame being animated to should be considered as being ahead or behind the current frame. <br /><br />Specifying a direction value of 1 will change the current frame from the "animate-in" position, to "animate-out", and the next frame will be changed from "start" to "animate-in".<br /><br />
Specifying a value of -1 will change the current frame from "animate-in" to the "start" position and the next frame will be changed from "animate-out" to "animate-in".<br /><br />
If a "direction" is not specified, Sequence will consider a frame with a higher id than the current frame as being ahead of it (1), and frames with a lower id will be considered as being behind (-1).
</td>
<td><code>sequence.goTo(3, 1)</code></td>
</tr>
<tr>
<td>next()</td>
<td>Causes Sequence to animate to the next frame</td>
<td>None</td>
<td><code>sequence.next()</code></td>
</tr>
<tr>
<td>prev()</td>
<td>Causes Sequence to animate to the previous frame</td>
<td>None</td>
<td><code>sequence.prev()</code></td>
</tr>
<tr>
<td>startAutoPlay(wait, newAutoPlayDelay)</td>
<td>Start Sequences auto play feature if not already active</td>
<td><strong>wait(optional)</strong>: A number in milliseconds to wait before autoPlay feature is started. If undefined, the value will be 0<br /><br />
<strong>newAutoPlayDelay (optional)</strong>: The delay between frames automatically animating in/out. If undefined, the existing autoPlayDelay value will be used
</td>
<td><code>sequence.startAutoPlay(1000, 3000)</code></td>
</tr>
<tr>
<td>stopAutoPlay()</td>
<td>Stop Sequence from auto playing</td>
<td>None</td>
<td><code>sequence.stopAutoPlay()</code></td>
</tr>
<tr>
<td>preloaderFallback()</td>
<td>The default preloader consists of three images that are faded in and out using CSS3 transitions. Calling preloaderFallback() replicates the default preloader using jQuery and should be called after a Sequence slider is initiated.</td>
<td>None</td>
<td><pre><code>var sequence = $("#sequence").sequence(options).data("sequence");
if(!sequence.transitionsSupported){
sequence.preloaderFallback();
}</code></pre></td>
</tr>
</tbody>
</table>
<h4 id="methods-variables">Public Variables</h4>
<table>
<thead>
<tr>
<td>Variable</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>sequence.container</td>
<td>Returns the selector for Sequence's container element</td>
</tr>
<tr>
<td>sequence.currentFrame</td>
<td>Returns the selector for the current frame</td>
</tr>
<tr>
<td>sequence.direction</td>
<td>Returns the direction Sequence is currently animating in (1 = forward/-1 = reverse)</td>
</tr>
<tr>
<td>sequence.currentFrameChildren</td>
<td>Returns an array containing the selectors for the current frame's child elements</td>
</tr>
<tr>
<td>sequence.currentFrameID</td>
<td>Returns a number representing the current frames position in relation to all frames. 1 is the first frame</td>
</tr>
<tr>
<td>sequence.nextFrameID</td>
<td>Returns a number representing the nextframes position in relation to all frames. 1 is the first frame</td>
</tr>
<tr>
<td>sequence.hasTouch</td>
<td>Returns true or false depending on whether the device has touch capabilities</td>
</tr>
<tr>
<td>sequence.numberOfFrames</td>