The general structure for the cycle module is:
CYCLE TILES
As of JMPv3.0 build 5 on it also possible to use tiles transitions on cycled content
module | cycle has the - "proof of concept" - cycle tiles plugin of Thomas Jaynis fully integrated (+customized)
Combining module | cycle with JMPv3.0s other modules allows for amazing transitions, not only images but on any cycled content
HOW TO USE ?
To enable the tiles transition the property fx must contain the fx tiles
The property tiles | fx is used to select any of the 10 default tiles fx
example:
fx : tiles
tiles | fx : boxRandom
In this example the tiles effect is set to boxRandom
But module | cycle allows for much greater control over tiles fx selection and customizing
Multiple tiles fx can be set, and completely be combined with the default cycle fx settings
example:
fx : tiles,blindX,fadeZoom,tiles
tiles | fx : boxRandom,boxSnake
In this multi fx example the tiles effect are mixed into the default cycle fx
The order of fx here would run in it's default state as ...
boxRandom,blindX,fadeZoom,boxSnake,-boxRandom,blindX,fadeZoom,boxSnake ... etc
CUSTOMIZING ?
module | cycle also allows for great control over customizing the tiles fx by using the custom tiles properties
example:
custom tiles | target : boxRandom
custom tiles | columns : 10
custom tiles | rows : 10
custom tiles | css before : not used
custom tiles | delay : 200
In this example the default tiles fx boxRandom is targeted to be customized ...
This target property is very versatile, targets can be all tiles fx or a specific tiles fx or even multiple tiles fx can be targeted
example:
custom tiles | target : boxRandom,centerX
custom tiles | columns : 10
...
In this example the default tiles fx boxRandom and centerX are targeted to be customized
CONTROLLING THE CYCLE
Although module | cycle already has many customized options even more control can be attained programmable
PROGRAMMABLE CYCLE CONTROL 1
pause - pause cycle
resume - resume cycle
toggle - toggle between pause and resume
next - next slide
prev - previous slide
stop - stop cycle - stops all cycle activity - no resume/autoplay/events
destroy - remove and unbind all events
slideNR - set specific slide (zero-based)
slideNR,fxNAME - set specific slide with specific fx
example:
$(selector).cycle('pause');
example:
$(selector).cycle(1,'blindX');
PROGRAMMABLE CYCLE CONTROL 2
The callback before/after/end properties can also be use to get and set the internal options
example:
opts.easeIn
some of the options:
delay startingSlide currFx
easeIn sync lastFx
speedIn fx random
Although module | cycle already has many customized options even more control can be attained programmable
PROGRAMMABLE CYCLE CONTROL 1
pause - pause cycle
resume - resume cycle
toggle - toggle between pause and resume
next - next slide
prev - previous slide
stop - stop cycle - stops all cycle activity - no resume/autoplay/events
destroy - remove and unbind all events
slideNR - set specific slide (zero-based)
slideNR,fxNAME - set specific slide with specific fx
example:
$(selector).cycle('pause');
example:
$(selector).cycle(1,'blindX');
PROGRAMMABLE CYCLE CONTROL 2
The callback before/after/end properties can also be use to get and set the internal options
example:
opts.easeIn
some of the options:
delay startingSlide currFx
easeIn sync lastFx
speedIn fx random
Or any similar structure ...
The easiest setup of this module would be a gallery display (=WB slideshow)
The easiest setup of this module would be a gallery display (=WB slideshow)
PROGRAMMABLE CYCLE TILES CONTROL
The callback before/after/end properties can be use to get and set internal options
example:
opts.tiles.type
CUSTOMIZE EFFECT - COVER - UNCOVER
The cycle cover and uncover effects can be customized by using an additional direction function
Add the function in the property code modification | function add
up = animate up
down = animate down
left = animate left
right = animate right
example:
,direction: 'down'
NOTE:
All effects can be further customized by using the custom | ... properties
Or use the callback | before property to customize effects (=opts.)
The cycle cover and uncover effects can be customized by using an additional direction function
Add the function in the property code modification | function add
up = animate up
down = animate down
left = animate left
right = animate right
example:
,direction: 'down'
NOTE:
All effects can be further customized by using the custom | ... properties
Or use the callback | before property to customize effects (=opts.)
STRUCTURE OF THE CYCLE
Additional custom features can be build by manipulating the internal structure of the Cycle Slider
EXPLAIN ?
module | cycle properties can be used to create transitions on cycled content display
cycled transition - ie. an Image gallery display or a cycled iFrames transition or ... ?!
module | cycle properties can be used to create transitions on cycled content display
cycled transition - ie. an Image gallery display or a cycled iFrames transition or ... ?!
<div id="mySlider">
<img>
<img>
<img>
</div>
<img>
<img>
<img>
</div>
<div id="mySlider">
<div> </div>
<div> </div>
<div> </div>
</div>
<div> </div>
<div> </div>
<div> </div>
</div>
OR
__________________________________________________________________________
more info on module | cycle see here Properties
more info on module | cycle see here Online Tutorials
credits: mike alsup
credits: thomas jaynis
more info on module | cycle see here Properties
more info on module | cycle see here Online Tutorials
credits: mike alsup
credits: thomas jaynis
• div holder = id/class = SlideShow1 - SlideShow1
(img or li) etc
CALLBACK: some useful internal opts.
opts.currSlide = current slide
opts.nextSlide = next slide
opts.slideCount = total slides
opts.fx = all effects used
opts.fxs = all effects used (randomized order)
opts.currFx = get current fx
opts.newFx = set new fx
(img or li) etc
CALLBACK: some useful internal opts.
opts.currSlide = current slide
opts.nextSlide = next slide
opts.slideCount = total slides
opts.fx = all effects used
opts.fxs = all effects used (randomized order)
opts.currFx = get current fx
opts.newFx = set new fx
• pager = id/class = id_pager a - SlideShow1_pager a
advanced!
••• EXAMPLE
A Webbuilder Text object as percentage timer
01. add a WB Text object , note it's id ie. Text1
02. add the full id in the property animation | timer text (ID) ie. #wb_Text1
more info on selectors see here see also here (Webbuilder components)
A Webbuilder Text object as percentage timer
01. add a WB Text object , note it's id ie. Text1
02. add the full id in the property animation | timer text (ID) ie. #wb_Text1
more info on selectors see here see also here (Webbuilder components)
IMPORTANT opts.newFX:
The opts.newFx option needs to comply to 2 rules to work correct
01.
The opts.newFx must be equal to the amount of effects set at it's initial state
ie. 3 effects are set with the opts.newFx then the initial effect on the property fx must also contain 3 effects
02.
Dynamic change of effects can cause the cycle to display incorrect
ie.
A zoom effect will collapse the current slide into a width of 0px
If a dynamic change occurs at that moment the next slide will return with a width of 0px
Which means the slide will not be displayed, not be visiible
Manual correct the width by using ie. the callback | before property
example: $(next).css('width', my width correction)
The opts.newFx option needs to comply to 2 rules to work correct
01.
The opts.newFx must be equal to the amount of effects set at it's initial state
ie. 3 effects are set with the opts.newFx then the initial effect on the property fx must also contain 3 effects
02.
Dynamic change of effects can cause the cycle to display incorrect
ie.
A zoom effect will collapse the current slide into a width of 0px
If a dynamic change occurs at that moment the next slide will return with a width of 0px
Which means the slide will not be displayed, not be visiible
Manual correct the width by using ie. the callback | before property
example: $(next).css('width', my width correction)
advanced!
CYCLE ASPECT RATIO
As of JMPv3.0 build 5.3 a new aspect ratio option for use with a WB SlideShow is added - 1 mode (+option)
This option allows each individual slideshow image to maintain it's original aspect ratio
This option is completely integrated with module | reposition and in combination with allows for powerful creative responsive design
see more here
NOTE: module | cycle - tiles is a highly customized version of the jQuery cycle tiles plug with many additional options!
MODULE CYCLE - OVERVIEW
b5.3
b5.0
Cycled Content Display
Transition
SlideShow - Ratio
Transition
SlideShow - Ratio
PLUGIN
••• EXAMPLE
Module | cycle on an integrated Webbuilder SlideShow
01. add a Webbuilder slideshow to a project and add images to the slideshow
02. set the slideshow pause time to 0 <--- important - window alert will display
03. note the slideshows id - and add this id to the cycle module selector property (=#SlideShow1)
identifier : my cycle notes
selector : #SlideShow1
fx : zoom,slideX,blindX
...
...
run on load : true
run on call : Call_Cycle_1
...
This will create a cycle transition on our SlideShow1
More complex structures can be build by combining other modules of jor_aniMateMASTERPACKv3.0
NOTE:
a link can be set for the image, the effect however will occur on the link, some effects may behave different (dimension)
ie. turnLeft, growX, slideX
Module | cycle on an integrated Webbuilder SlideShow
01. add a Webbuilder slideshow to a project and add images to the slideshow
02. set the slideshow pause time to 0 <--- important - window alert will display
03. note the slideshows id - and add this id to the cycle module selector property (=#SlideShow1)
identifier : my cycle notes
selector : #SlideShow1
fx : zoom,slideX,blindX
...
...
run on load : true
run on call : Call_Cycle_1
...
This will create a cycle transition on our SlideShow1
More complex structures can be build by combining other modules of jor_aniMateMASTERPACKv3.0
NOTE:
a link can be set for the image, the effect however will occur on the link, some effects may behave different (dimension)
ie. turnLeft, growX, slideX
STYLING THE CYCLE
module | cycle allows for a broad customizing of the cycle slider
01. pager and active pager - 02. stop/play button - 03. next-previous navigation - 04. title text - 05. percentage timer
All directly by using static WYSIWYG Webbuilder components
module | cycle allows for a broad customizing of the cycle slider
01. pager and active pager - 02. stop/play button - 03. next-previous navigation - 04. title text - 05. percentage timer
All directly by using static WYSIWYG Webbuilder components
PAGINATION
01. pagination by Webbuilder object, the objects are entered as a string - ie. Image or Text
ie. pager | pagers: #Shape1,#Shape2,#Shape3
02. pagination by Webbuilder component - NavigationBar, TabMenu or PhotoGallery
ie. pagers | pagers: #NavigationBar1 li
03. active pager by Webbuilder Image object
the active pager will take the position and dimension of the pagination object used
NOTE: active pager is disabled if a WB component is used as pagination
STOP-PLAY BUTTON
01. stop/play button by Webbuilder object - ie. Image or Text
02. stop/play visual text display by Webbuilder Text object
NEXT-PREVIOUS BUTTON
01. next/previous navigation by Webbuilder object - ie. Image or Text
TITLE TEXT
01. title text by Webbuilder Text object, the id of the Text object is entered into the property title | id
the title property of the images used (=Slideshow Alternate Text) are used to set the title
PERCENTAGE TIMER
01. percentage timer by Webbuilder Text object, a visual display of the animation time
01. pagination by Webbuilder object, the objects are entered as a string - ie. Image or Text
ie. pager | pagers: #Shape1,#Shape2,#Shape3
02. pagination by Webbuilder component - NavigationBar, TabMenu or PhotoGallery
ie. pagers | pagers: #NavigationBar1 li
03. active pager by Webbuilder Image object
the active pager will take the position and dimension of the pagination object used
NOTE: active pager is disabled if a WB component is used as pagination
STOP-PLAY BUTTON
01. stop/play button by Webbuilder object - ie. Image or Text
02. stop/play visual text display by Webbuilder Text object
NEXT-PREVIOUS BUTTON
01. next/previous navigation by Webbuilder object - ie. Image or Text
TITLE TEXT
01. title text by Webbuilder Text object, the id of the Text object is entered into the property title | id
the title property of the images used (=Slideshow Alternate Text) are used to set the title
PERCENTAGE TIMER
01. percentage timer by Webbuilder Text object, a visual display of the animation time
CUSTOMIZE EFFECT - CUSTOM
By setting the property fx to custom we can initialize a custom effect
With the custom | ... properties we can then build our custom effect
custom | anim out = determines how the current slide will animate out of position
custom | css before = sets the state of the next slide in it's starting position
custom | anim in = determines how the next slide will animate into position
custom | css after = sets the state of the current slide in it's end position
custom | overflow = behavior of the cycle holder when content is passing it's border
IMPORTANT:
Set these custom | ... properties to not used if not used , and custom | overflow to visible
All effects - can - will - be altered (are affected) by using these properties
By setting the property fx to custom we can initialize a custom effect
With the custom | ... properties we can then build our custom effect
custom | anim out = determines how the current slide will animate out of position
custom | css before = sets the state of the next slide in it's starting position
custom | anim in = determines how the next slide will animate into position
custom | css after = sets the state of the current slide in it's end position
custom | overflow = behavior of the cycle holder when content is passing it's border
IMPORTANT:
Set these custom | ... properties to not used if not used , and custom | overflow to visible
All effects - can - will - be altered (are affected) by using these properties
CUSTOMIZE EFFECT - WIPE - 1
The cycle wipe effect can be customized by using an additional clip function
Add the function in the property code modification | function add
l2r = left to right
r2l = right to left
t2b = top to bottom
b2t = bottom to top
zoom = center to edges
example:
,clip: 'l2r'
The cycle wipe effect can be customized by using an additional clip function
Add the function in the property code modification | function add
l2r = left to right
r2l = right to left
t2b = top to bottom
b2t = bottom to top
zoom = center to edges
example:
,clip: 'l2r'
CUSTOMIZE EFFECT - WIPE - 2
Additional the custom | css before property can also be used to set the clip of the wipe effect
Which allows for even greater control of the wipe direction
example:
custom | css before: clip: 'rect(0px 0px 0px 0px)'
Where rect = rect(topStart rightStart bottomStart leftStart)
Additional the custom | css before property can also be used to set the clip of the wipe effect
Which allows for even greater control of the wipe direction
example:
custom | css before: clip: 'rect(0px 0px 0px 0px)'
Where rect = rect(topStart rightStart bottomStart leftStart)
Cycle-Slider
NEW IN BUILD 5.0
01. NEW
• tiles transition
NEW IN BUILD 5.2
01. ENHANCED-CHANGED
• REQUIRED: jor_aniMateLIMITER
NEW IN BUILD 5.3
01. NEW
• new option: aspect ratio
01. NEW
• tiles transition
NEW IN BUILD 5.2
01. ENHANCED-CHANGED
• REQUIRED: jor_aniMateLIMITER
NEW IN BUILD 5.3
01. NEW
• new option: aspect ratio
5