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_cycle.js
Contains the Fx.Cycle Class and the Fx.Cycle extensions for creating powerful cycle effects, based on differentstyle transitions.
Contains
Class Fx.Cycle and its extensions, Class Element
Summary
| Fx.Cycle | A wrapper which allows you to create powerful cycle effects | |
| Element | Contains the cycle method which returns a determinate Fx.Cycle instance |
With the Fx.Cycle extensions, you can create the "cycle effect" which means a slideshow based on a particularstyle transition. This file contains 14 Fx.Cycle extensions, like Fx.Cycle.zoom and Fx.Cycle.fade.In addiction, you can create your own cycle effect, either customizing an existing one or creating a new one.Below you can find all the Fx.Cycle extensions.
Extends
Fx.Morph
Constructor
new Fx.Cycle.cycleType (element, options)
Properties
| element | the wrapper which contains your slides | |
| options | optional. The Fx options plus those described below |
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. | |
| animeInType | indicates the method to use with the animeIn object. It can be 'set' (default) or 'start' | |
| 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.Cycle'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 |
Note
You can use the keywords 'this.height' and 'this.width' into the animeIn, animeOut and cssBefore 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});
Contains the cycle method which returns a determinate Fx.Cycle instance
Extends
Class Element
Methods
| cycle | returns an Fx.Cycle instance of the given type |
top method cycle
returns an Fx.Cycle instance of the given type
Arguments
| type | the Fx.Cycle transition | |
| options | the Fx.Cycle options |
Example
// slideUp instance var slideUp = $('myElement').cycle('slideUp'); // diagonalUp instance var diagonalUp = $('myElement').cycle('diagonalUp', {duration: 4000, 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
