CORE
NATIVE
TABLE
MAKE
CUSTOMIZE
EFFECTS
effects_base.js
effects_morph.js
effects_fade.js
effects_move.js
effects_extra.js
effects_toggle.js
effects_cycle.js
effects_cycles.js
VIRTUAL BOX
PLUG-IN
effects_cycles.js
Contains the Fx.Cycles Class and the Fx.Cycles extensions to create powerful cycle slideshows which altertwo slides at once
Contains
Class Fx.Cycles and its extensions, Class Element
Summary
| Fx.Cycles | A wrapper which allows you to create powerful cycle effects | |
| Element | Contains the cycles method which returns a determinate Fx.Cycles instance |
The Fx.Cycles Class provides a similar functionality to the Fx.Cycle Class. With the Fx.Cycles Class however,you can "cycle" two slides at once, to create more complex transitions. There are 13 transitions created by default,but you can create your own as with the Fx.Cycle Class.
Extends
Fx.Elements
Constructor
new Fx.Cycles.cycleType (element, options)
Properties
| element | the wrapper which contains your slides | |
| options | optional. The Fx options |
Options
| animeOut | an object whose properties are the styles to alter when the slide gets out. | |
| animeIn | an object whose properties are the styles to alter when the slide comes in. | |
| cssBefore | an object whose properties are the styles to alter immediately before the slide comes in. | |
| cssAfter | an object whose properties are the styles to alter immediately after the slide has come in. | |
| reset | an object whose properties are the styles to reset to the next slide. | |
| overflow | the overflow of the wrapper. Depends on the type of cycle effect. | |
| steps | the timer used by autostart to change periodically the slides. Default is 2000 ms | |
| handles | an object which attaches events to elements passed in as values. The keywords represent the Fx.Cycles's methods | |
| autostart | if true the slides will be changed automatically. Deafult is true | |
| enable | an object containing some keywords to enable extra features. See below. |
enable:
-
keyboard: if true you can navigate with the keyboard too. In addition to the arrows, you can use the following keys. 'a' for autostart, 's' for stop, 'f' to go to the first slide and 'l' to go to the last slide.
Events
| onAnimeIn | function fired immediately before the element is animed in. The current and the next slide will be passed in | |
| onAnimeOut | function fired immediately before the element is animed out. The current and the next slide will be passed in |
Methods
| next | switches to the next slide | |
| prev | switches to the previous slide | |
| goTo | swicthes to the given slide | |
| toFirst | switches to the first slide | |
| toLast | switches to the last slide | |
| autostart | enables the cycle slideshow | |
| stop | stops the slideshow either if start method has been called or autostart option has been enabled | |
| animeIn | sets the animeIn properties | |
| animeOut | sets the animeOut properties | |
| cssBefore | sets the cssBefore properties | |
| cssAfter | sets the cssAfter properties | |
| reset | sets the reset properties |
Note
You can use the keywords 'this.height' and 'this.width' into the animeIn, animeOut, cssBefore, cssAfter and reset methods,to refer respectively to the images' height and width. Using the keyword 'this.parentHeight' and 'this.parentWidth'you can refer to the parent element dimensions.In addiction, you can use the keywords 'this.currSlide' and 'this.nextSlide' to refer respectively to the current andthe next slide.
top method next
switches to the next slide
Example
fx.next();
top method prev
switches to the previous slide
Example
fx.prev();
top method goTo
swicthes to the given slide
Arguments
| num | the position of the needed slide |
Example
fx.goTo(2);
top method toFirst
switches to the first slide
Example
fx.toFirst();
top method toLast
switches to the last slide
Example
fx.toLast();
top method autostart
enables the cycle slideshow
Example
fx.autostart();
top method stop
stops the slideshow either if start method has been called or autostart option has been enabled
Example
fx.stop();
top method animeIn
sets the animeIn properties
Arguments
| styles | an object which contains the animeIn css styles |
Example
fx.animeIn({top: 200, left: 200});
top method animeOut
sets the animeOut properties
Arguments
| styles | an object which contains the animeOut css styles |
Example
fx.animeOut({top: -200, opacity: 0});
top method cssBefore
sets the cssBefore properties
Arguments
| styles | an object which contains the cssBefore css styles |
Example
fx.cssBefore({left: 200, opacity: 1, height: 0, width: 0});
top method cssAfter
sets the cssAfter properties
Arguments
| styles | an object which contains the cssAfter css styles |
Example
fx.cssAfter({left: 0, opacity: 0, height: 200});
top method reset
sets the reset properties
Arguments
| styles | an object which contains the reset css styles |
Example
fx.reset({top: 200, opacity: 1, width: 0});
Contains the cycles method which returns a determinate Fx.Cycles instance
Extends
Class Element
Methods
| cycles | returns an Fx.Cycles instance of the given type |
top method cycles
returns an Fx.Cycles instance of the given type
Arguments
| type | the Fx.Cycles transition | |
| options | the Fx.Cycles options |
Example
// scrollUp instance var scrollUp = $('myElement').cycles('scrollUp'); // turnUp instance var turnUp = $('myElement').cycles('turnUp', {duration: 2000, steps: 4000});
Documentation By
Riccardo Degni -
powered by MakeDocs, CMS by RD
The moo.rd documentation is released under the
Creative Commons BY-NC SA License
