NOTE: advanced property
NOTE: use the  code modification | javascript | before  property to set additional variables  (see below)
•••• syntax: function return

-----

slideshow | aspect
enable  each  individual slideshow image to maintains it's original aspect ratio
NOTE: if enabled the property  custom | overflow  is surpassed (=hidden)
NOTE: this property is completely integrated with  module | reposition
•••• var: string

slideshow | aspect clip
set the clip point on which the aspect ratio is maintained
if the value is  1   the original aspect ratio is always maintained - (=image clips)
at higher values the images will contract , maintain aspect, until the aspect ratio can not be maintained any longer
at this clip  point the value set here will determine the amount of distortion (width compression) that will occur to the image
CON: the higher the value the greater the distortion after the clipping point
PRO: the higher the value the more the image remains in view after the clipping point
•••• var: non-string

-----

run on load
run on load enables or disables this module to run on page load

run on call
run on call is the function name we can give this current function
we can call this function to occur ie. by using a    callback | function
for an in depth on callback and run on call see here

code modification | function add
add additional cycle functions   (see also CUSTOMIZE EFFECT ... here)
NOTE: code start with a comma

code modification | variable
add a function variable ie. Call_Cycle_1(myVariable)
this function is beyond the scope of this manual   see here

code modification | javascript | after
add javascript, further enhancing this function by adding custom code
this function is beyond the scope of this manual   see here

code modification | javascript | before
add javascript, further enhancing this function by adding custom code
this function is beyond the scope of this manual   see here
CUSTOM FX - TILES:

custom tiles | target
set custom tiles target - this property targets which  tiles fx  is affected by the  custom tiles  properties
this property is very versatile, target  all  or  none  or  a specific tiles fx  or  even multiple tiles fxs
all            =  target all tiles fx
none           =  target none
blindX         =  target only this  tiles fx
blindX,blindY  =  target only these tiles fxs

•••• var: string

custom tiles | columns
set custom columns amount
NOTE: not all tiles effect can/should be changed by this property - ie. boxSnake, columns + rows is locked to 5
•••• var: non-string

custom tiles | rows
set custom rows amount
NOTE: not all tiles effect can/should be changed by this property - ie. boxSnake, columns + rows is locked to 5
•••• var: non-string

custom tiles | css before
set custom css for the tiles before the transition occurs
•••• var: non-string

custom tiles | delay
set custom animation delay for each tile
•••• var: non-string

custom tiles | order
set custom animation order for the tiles
__________________________________________________________________________
more info on   module | cycle   see here Overview
more info on   module | cycle   see here Online Tutorials
ADVANCED - ROUGH - EXAMPLE: return the order of tiles animation

VARIABLE BEFORE:

var tilesOrder = [0, 5, 1, 10, 6, 2, 15, 11, 7, 3, 14, 12, 8, 4, 9, 13];  <--- 16 tiles


TILES SETUP:

custom tiles | columns  = 4   <-----------------------------------+--- 4 x 4 = 16 tiles
custom tiles | rows     = 4   <-----------------------------------+

ORDER SETUP (RETURN):
custom tiles | columns  = function(i) {
return tilesOrder[i]
};
b5.3
b5.3
MODULE CYCLE - PROPERTIES
PLUGIN
identifier
1. identifier is used to write down notes of animations, actions and anything we find important to make note of
    identifier is a visual reference
2. identifier also provides a quick overview of the function structure flow
STRUCTURE: function (e) {  javascript before - init - callback - javascript after  }

selector
target an object by id (#) or class (.) or element
the full range on selectors is beyond the scope of this manual
for an in depth on selectors simplified see here
•••• var: string

SETTINGS:

fx
with fx we can set the type of transition effect to execute
     the full list of cycle transitions is:
     blindX, blindY, blindZ
     curtainX, curtainY
     fade, fadeZoom, zoom
     growX, growY
     scrollDown, scrollUp, scrollLeft, scrollRight, scrollHorz, scrollVert
     slideX, slideY
     turnDown, turnUp, turnLeft, turnRight
     cover, uncover, shuffle, toss, wipe
     custom, allEffects, tiles
     NOTE: multiple transitions can be linked together ( ie. blindX,fadeZoom,turnUp,slideX ... )
     NOTE: set a   tiles   type fx with the property   fx | tiles type   - see next property
•••• var: string

tiles | fx
set tiles fx type
     the full list of tiles cycle transitions is:
     blindX, blindY
     centerX, center Y
     dropX, dropY
     boxLeafs1, boxLeafs2, boxRandom, boxSnake
     allEffects
     NOTE: set the property   fx   (see above)  to   tiles   to use this effect type
     NOTE: multiple tiles transitions can be linked together ( ie. blindX,boxRandom,boxSnake ... )
•••• var: string

tiles | fade easing
set easing effect for the tiles slide transition
easing effect will add non-linear movement to animation, movement like acceleration, bounce, elastic  etc
     the full list of easing effects is:
     back-in, back-out, back-inout
     bounce-in, bounce-out, bounce-inout
     circ-in, circ-out, circ-inout
     cubic-in, cubic-out, cubic-inout
     elas-in, elas-out, elas-inout
     expo-in, expo-out, expo-inout
     quad-in, quad-out, quad-inout
     quart-in, quart-out, quart-inout
     quint-in, quint-out, quint-inout
     sine-in, sine-out, sine-inout
     swing, linear
     NOTE: for a reference on easing effect see here
•••• var: string

first slide
set the first slide to start the cycle from
NOTE: if the property   randomize   is set to false
•••• var: non-string

no wrap
prevent the cycle from looping back to start
NOTE: if the property   randomize   is set to false
•••• var: non-string

backward
cycle starts at last slide and cycles in reverse direction
NOTE: if the property   randomize   is set to false
•••• var: non-string

randomize
randomize the cycle slide order
•••• var: non-string

autostop
cycle stops after the amount set by the property   autostop count   is reached
•••• var: non-string

autostop count
if the property   autostop   is true the cycle will stop after this value is matched
•••• var: non-string

continuous
if continuous is set to true the next transition will start instant at transition end, this overrides the   animation | timer   (see below)
NOTE: an event occurrence will stop this continues cycle
•••• var: non-string

first slide delay
set an extra delay time before the   first   slide starts, negative values can be used

•••• var: non-string

animation | duration
set duration of the transition effect
NOTE: this value can not be higher then the   animation | timer   value   (see below)
            if  set higher, this property will automatically revert to the same speed as the   animation | timer
•••• var: non-string

animation | easing
set easing effect for the slide transition
easing effect will add non-linear movement to animation, movement like acceleration, bounce, elastic  etc
     the full list of easing effects is:
     back-in, back-out, back-inout
     bounce-in, bounce-out, bounce-inout
     circ-in, circ-out, circ-inout
     cubic-in, cubic-out, cubic-inout
     elas-in, elas-out, elas-inout
     expo-in, expo-out, expo-inout
     quad-in, quad-out, quad-inout
     quart-in, quart-out, quart-inout
     quint-in, quint-out, quint-inout
     sine-in, sine-out, sine-inout
     swing, linear
     NOTE: for a reference on easing effect see here
•••• var: string

autoplay | timer
set autoplay time to next slide (0=OFF)
•••• var: non-string

autoplay | timer text (ID)
set the selector of a Webbuilder Text object to act as a visual display percentage timer of the   autoplay | timer
•••• var: string

effect | sync
the in and out of the transition effect will overlap if sync is set to   true  , else they  will occur in sequence
•••• var: non-string

effect | reverse
if the effect allows it , the   transition effect   will execute in reverse direction
EXAMPLE FX: scrollHorz - scrollVert - shuffle
•••• var: non-string

effect | randomize
randomize the cycle  fx  order (if multiple effect are used)
•••• var: non-string

effect | shuffle
set the direction of the  shuffle  transition by setting the left and top attributes
•••• var: non-string

cleartype fix 1   &   cleartype fix 2
tries to fix IE deformation of text and image display  (1.filter - 2.background fix)
•••• var: non-string

event | fast time
set preceding speed of the effect transition on event occurrence, this will override the   animation | speed   time (0=OFF)
NOTE: 01. animation | easing   will be disabled if used  -  02. this property does not work with  tiles  effects
•••• var: non-string

event | animation stop
if set to   true   the current animation will stop instant on event occur and continue into the next transition
•••• var: non-string

event | pause container
if set to   true   the cycle will pause on mouseover on the container  (=the slider)

•••• var: non-string

EXTERNAL CONTROL:

control | play
set the selector of an object to act as an autoplay   play   button
•••• var: string

control | stop
set the selector of an object to act as an autoplay   stop   button
•••• var: string

control | text (ID)
set the selector of a Webbuilder Text object to act as a visual display of the autoplay  - play / stop state
•••• var: string

control | text | play
set text for the play state
•••• var: string

control | text | stop
set text for the stop state
•••• var: string

EXTERNAL CONTROL - PAGER:

pager | pagers
set the selectors of the objects that will act as pagers for the slides, either a   string   or a   Webbuilder component
     string:
     each subsequent object added is matched by it's subsequent slide
     ie. #Shape1,#Shape2,#Shape3   =   Slide1 - Slide 2 - Slide 3   etc
     Webbuilder component:
     01. NavigationBar, 02. TabMenu or 03. PhotoGallery   can be used
     each entry of the component will match it's subsequent slide
     ie. Navigation.button1 - Navigation.button 2 - Navigation.button 3   =   Slide1 - Slide 2 - Slide 3   etc
•••• var: string

pager | active (ID)
set the selector of a Webbuilder Image object that will act as active pager for the pagers  (=Image,Shape,ClipArt,TextArt)
NOTE: the active pager is disabled when a Webbuilder component (NavigationBar/TabMenu/PhotoGallery) is used as pagination
•••• var: string

pager | active | duration
set the animation speed of the active pager
•••• var: non-string

pager | active | easing
set easing effect for the active pager
easing effect will add non-linear movement to animation, movement like acceleration, bounce, elastic  etc
     the full list of easing effects is:
     back-in, back-out, back-inout
     bounce-in, bounce-out, bounce-inout
     circ-in, circ-out, circ-inout
     cubic-in, cubic-out, cubic-inout
     elas-in, elas-out, elas-inout
     expo-in, expo-out, expo-inout
     quad-in, quad-out, quad-inout
     quart-in, quart-out, quart-inout
     quint-in, quint-out, quint-inout
     sine-in, sine-out, sine-inout
     swing, linear
     NOTE: for a reference on easing effect see here
•••• var: string

pager | active | z-index
set the z-index of the active pager, most likely a high value to stay on top of the pagers
•••• var: string

pager | pause pager
if set to true the cycle will pause on mouseover of the pagers
•••• var: non-string


pager | event type
set the event type for the pager navigations to execute
     the full list of events is:

    
click, mouseover, mouseout, mouseenter, mouseleave, mouseup, mousedown, mousemove
•••• var: string

EXTERNAL CONTROL - NEXT/PREVIOUS:

next-prev | next
set a selector for an object  to act as a   next   button event
•••• var: string

next-prev | prev
set a selector for an object  to act as a   previous   button event
•••• var: string

next-prev | event type
set the event type for the next-prev navigation
     the full list of events is:

    
click, mouseover, mouseout, mouseenter, mouseleave, mouseup, mousedown, mousemove
•••• var: string

-----

title | text (ID)
set selector of  a Webbuilder Text object used as optional slide title, the title info is taken from the image   title    (=Alternate Text)
•••• var: string
CALLBACK:

callback | before   &   callback | after
add a function before or after slide occur
the callback function in full range is beyond the scope of this manual
for an in depth on callback and run on call see here

   • fn: before/after: function (curr,next,opts,fw) { }
   curr  = returns current slide/object
   next  = returns next slide/object
   opts  = get and set internal options
   fw    = returns slide direction - 1=forward/0=backward


callback | end
add a function at cycle end
the callback function in full range is beyond the scope of this manual
for an in depth on callback and run on call see here
   • fn: end: function (opts) { }
   opts  = get and set internal options


callback | pager
add a function at pager event occur
the callback function in full range is beyond the scope of this manual
for an in depth on callback and run on call see here
   • fn: onPagerEvent: function (zeroBasedSlideIndex,slideElement) { }
   zeroBasedSlideIndex  = returns current pager/index - zeroBased
   slideElement         = returns current slide/object


callback | prev - next
add a function at previous and next event occur
the callback function in full range is beyond the scope of this manual
for an in depth on callback and run on call see here
   • fn: onPrevNextEvent: function (isNext,zeroB,slideE) { }
   isNext  = returns true if event  is  next
   zeroB   = returns current pager/index - zeroBased
   slideE  = returns current slide/object
CUSTOM FX:

custom | anim out
set the animate out attributes
•••• var: non-string

custom | css before
set css for the slide before the transition occurs, is   BEFORE   animate in
•••• var: non-string

custom | anim in
set the animate in attributes
•••• var: non-string

custom | css after
set the css for the slide after the transition occurs, is   AFTER   animate in
          NOTE: set the property   fx   to   custom   to initialize a custom fx
          NOTE: if no custom fx is used set these   custom | ...   properties to    not used
•••• var: non-string
custom | overflow
set behavior of the cycle holder when content is passing it's border
•••• var: string
     EXAMPLE CUSTOM FX:
  fx                   : custom       <--- initialize custom
  ...
  custom | anim out    : width:400,height:0,left:200
  custom | css before  : width:400,height:0,left:200
  custom | anim in     : width:140,height:200,left:0
  custom | css after   :
  custom | overflow    : hidden