-
Notifications
You must be signed in to change notification settings - Fork 16
/
cycle2.jquery.txt
161 lines (147 loc) · 11.3 KB
/
cycle2.jquery.txt
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
CYCLE2
ALTERNATIVES ==> #See slick
VERSION ==> #2.1.6
##There are some builtin plugin, marked like this
JQ.cycle([OBJ]) #Creates slideshow, where JQ is any ELEM with children CHILD (usually IMG).
#Done automatically at DOMContentLoaded on $(SELECTOR):
# - SELECTOR is by def ".cycle-slideshow", unless HTML attribute
# data-cycle-auto-init="false"
# - can change with $.fn.cycle.defaults.autoSelector "SELECTOR"
#Options can also be:
# - HTML attribute (dasherized) data-cycle-VAR="VAL"
# - $.fn.cycle.defaults OBJ
#Options marked as "+" can be put on a single CHILD (as HTML attribute)
COBJ #Like OBJ but with extra properties:
# - currSlide|nextSlide NUM
# - slideNum NUM: like currSlide, but starts at 1
# - slideCount NUM
# - busy BOOL: true when changing slides
# - paused BOOL: can also check for existence of CSS class ".cycle-paused"
# - any CHILD HTML attribute (camelcased, without data-)
HTML/CSS STRUCTURE ==> #The elements are queries according to "SELECTOR" (if starts with "> ", within JQ):
# - slides (def: "> img"): CHILD
# - prev|next (def: "> .cycle-next"): to go prev|next slide
# - pager (def: "> .cycle-pager"): to change slide
# - caption (def: "> .cycle-caption"): current slide counter
# - overlay (def: "> .cycle-overlay"): slide info
#They get the following CSS class:
# - slide[-active]-class STR (def: "cycle-slide[-active]")
# - pager-active-class STR (def: "cycle-pager-active")
# + slide-css OBJ: added to each slide
#Their content can be a Mustach template on COBJ:
# + pager-template STR (def: "<span>•</span>")
# + caption-template STR (def: "{{slideNum}}/{{slideCount}}")
# + overlay-template STR (def: "<div>{{title}}</div><div>{{desc}}</div>")
#They are triggered on events:
# - prev|next|pager-event "JQEVENT" (def: clicks)
# - pager-event-bubble BOOL: if true (def: false), bubbles "JQEVENT" in DOM
##Extra functions:
## - captionPlugin "caption2": animate caption|overlay, with additional OBJ:
## - caption|overlayFxOut|In (def: "fadeOut|fadeIn")
## - caption|overlayFxSel "SELECTOR": what to animate (def: entire)
## - youtube BOOL: must include <a> link to YouTube videos. Additional OBJ:
## - youtubeAutostart BOOL
## - youtubeAutostop BOOL: if true (def), stops when no longer on slideshow
## - youtubeAllowFullScreen BOOL (def: true)
AUTORUN ==> #OBJ:
# - allow-wrap BOOL: if true (def), last slide linked to first
# - disabled STR (def: "disabled"): CSS class of after-last|before-first slide when
# allow-wrap false
# - loop NUM: number of loops before stopping, 0 (def) for unlim
# + timeout NUM (def: 4000, 0 for no autorun): how long to automatically go on next slide
# - delay NUM (in ms, def: 0): how long before starting autorun
# - pause-on-hover BOOL|SELECTOR (def: false): stops autorun if true and hovering, or if
# hovering SELECTOR
# - paused BOOL (def: false): if true, starts in paused state
TRANSITION ==> #OBJ:
# + fx "fade[out]|scrollHorz|none" (def: "fade")
# Can add new one "FUNC" with $.fn.cycle.transitions.FUNC = OBJ2 (see online doc)
## Can also be:
## - "scrollVert"
## - "tileSlide|tileBlind": can then control with additional OBJ:
## + tileVertical BOOL (def: true)
## + tileCount NUM (def: 7)
## + tileDelay NUM (def: 100)
## - "flipHorz|filpVert": can then control with CSS perspective and transform-style on JQ
## - "shuffle": can then control with OBJ.shuffleRight|Left NUM and OBJ.shuffleTop NUM
## (number of slides to show)
## - "carousel": shows several slides at once, with additional OBJ:
## - carouselVisible NUM (def: all)
## - carouselFluid BOOL: if true, slides width will adapt to container
## - carouselVertical BOOL
## - carouselSlideDimension NUM (in px)
## - carouselOffset NUM (in px)
## - carouselThrottleSpeed BOOL: if true, slides of different sizes will still have
## same transition speed
# + speed NUM (def: 500)
# + easing STR (def: null)
# - sync BOOL: if true (def), starts out-transition in same time as in-transition
# + manual-fx "...", manual-speed NUM: like fx, but when transition happened without autorun
# (def: same)
# - manual-trumper BOOL: if true (def), can interrupt transition by starting new one
# - swipe BOOL (def: false): if true, enables swipes
## Must use builtin plugin if not using jQuery mobile.
# - swipe-fx "...": like fx, but for swipe gesture
OTHER OPTIONS ==> #OBJ:
# - auto-height NUM|STR: controls JQ height:
# - -1|false: no control
# - NUM (def: 0): same as NUMth slide
# - "calc": same as highest slide
# - "NUM:NUM2": make it so that it maintains this ratio
## - centerHorz|Vert BOOL (def: false): if true, centers
# - hide-non-active BOOL: if true (def), hides inactive slides
# - starting-slide NUM (def: 0)
# - random|reverse BOOL (def: false): if true, random|reverse order initially
# - loader VAL (def: false):
# - if "wait", waits for all CHILD IMG to be loaded before adding them
# - if true, same but for each CHILD, which is more efficient but might change CHILD
# order
# - progressive "SELECTOR": waits for each CHILD to be displayed to show it.
# CHILD must be $("SELECTOR") instead, holding them as HTML[_JSON]
# - log BOOL: if true (def), do console.debug()
JQ.cycle("destroy|reinit") #
JQ.cycle("prev|next") #
JQ.cycle("goto", NUM) #
JQ.cycle("pause|resume") #
JQ.cycle("stop") #When autorunning
JQ.cycle("add", "HTML"|JQ2) #
JQ.cycle("remove", NUM) #
JQ.cycle("updateView") #
<any>
data-cycle-cmd="FUNC"
data-cycle-arg="VAL"
data-cycle-context="SELECTOR" #Calls $("SELECTOR").on("click", FUNC(VAL)) (def SELECTOR: ".cycle-slideshow" like above)
<CHILD> #Change URL hash to "#STR" when CHILD active.
data-cycle-hash="STR" #Also, when new page loads,
JQ.on
("cycle-bootstrap|pre-initialize|
initialized|post-initialize",
FUNC(JQEVENT, COBJ)) #Before|after construction. Before: can modify COBJ.
JQ.on("cycle-destroyed",
FUNC(JQEVENT, COBJ)) #
JQ.on("cycle-prev|next",
FUNC(JQEVENT, COBJ)) #
JQ.on("cycle-before|after",
FUNC(JQEVENT, COBJ, OLD_ELEM,
NEW_ELEM, BOOL)) #Before|after changing slide (BOOL true if forward)
JQ.on("cycle-pager-activated",
FUNC(JQEVENT, COBJ)) #Changing slides because of paging links
JQ.on("cycle-finished"
FUNC(JQEVENT, COBJ)) #Ends of slideshow with OBJ.loop
JQ.on("cycle-stopped",
FUNC(JQEVENT, COBJ)) #When autorunning
JQ.on("cycle-transition-stopped",
FUNC(JQEVENT, COBJ)) #
JQ.on("cycle-paused|resumed",
FUNC(JQEVENT, COBJ)) #
JQ.on("cycle-slide-added",
FUNC(JQEVENT, JQ2)) #
JQ.on("cycle-slide-removed",
FUNC(JQEVENT, NUM, JQ2)) #
JQ.on("cycle-update-view", #After initialization, slide change|add|remove
FUNC(JQEVENT, COBJ, OBJ2, ELEM)) #For slide change, is fired according to OBJ.update-view NUM:
# - -1: before transition
# - 0 (def): during transition
# - 1: before and after transition