jorextensions.com free extensions for WYSIWYG Webbuilder
jordan (6j6)
jordan (6j6)
tutorial for module | cycle
jor_aniMateMASTERPACKv3.0 build 5
jordan (6j6) - jorextensions.com
jor_aniMateMASTERPACKv3.0 build 5
jordan (6j6) - jorextensions.com
TUTORIAL module | cycle - basic
Welcome to this tutorial for jor_aniMateMASTERPACKv3.0 ...
In this tutorial we will use module | cycle to create a basic cycle slider with external control
Module | cycle can be found under the section 04. MODULES SECONDARY 2 in the extension
Module | cycle can be found under the section 04. MODULES SECONDARY 2 in the extension
THE SELECTOR ?
.
To work with jor_aniMateMASTERPACKv3.0 it is crucial to understand the selector input
"The better understanding of the selector the more we can get out of jor_aniMateMASTERPACKv3.0"!
To gain an understanding of the selector input see the jor_aniMateMASTERPACKv3.0 online manual first
see here ...
• Selectors Simplified
• When do we animate what ?
.
To work with jor_aniMateMASTERPACKv3.0 it is crucial to understand the selector input
"The better understanding of the selector the more we can get out of jor_aniMateMASTERPACKv3.0"!
To gain an understanding of the selector input see the jor_aniMateMASTERPACKv3.0 online manual first
see here ...
• Selectors Simplified
• When do we animate what ?
In this tutorial we are going to create a basic cycle slider with external control
This tutorial is broken up into two sections
In Tutorial 1 we will setup the cyle slider, in Tutorial 2 we will setup external controls
Let's go ...
In Tutorial 1 we will setup the cyle slider, in Tutorial 2 we will setup external controls
Let's go ...
selector = #SlideShow1
Next we need to set the Pause time inside the WB SlideShow to zero
If the Pause time is not set to zero a window alert will prompt to comply as a reminder
If the Pause time is not set to zero a window alert will prompt to comply as a reminder
All components for module | cycle are WB objects that we can place and style as we require
Most of the time we simply need to add a WB Image or Text object to our project, and enter there ID in
the corresponding property
In this tutorial we have set up 6 functions
autoplay | delay text (ID) = #wb_count
That's all the inputs we have to set for the percentage autoplay timer
What is jor_aniMateMASTERPACKv3.0 ?
jor_aniMateMASTERPACKv3.0 is a collection of 15+ modules and 8+ tools combined in one extension
They can work together as a pack to create a complete new extension or modules can be used freestanding
jor_aniMateMASTERPACKv3.0 is a tool first and foremost - combined with creativity the possibilities are endless
jor_aniMateMASTERPACKv3.0 is a collection of 15+ modules and 8+ tools combined in one extension
They can work together as a pack to create a complete new extension or modules can be used freestanding
jor_aniMateMASTERPACKv3.0 is a tool first and foremost - combined with creativity the possibilities are endless
Download the demo of the above tutorials here as WB project ...
module | cycle is a tool of jor_aniMateMASTERPACKv3.0 build 5 • 2009 - 2015
more demo's, info, online manual, etc for jor_aniMateMASTERPACKv3.0 visit jorextensions.com
jor_aniMateMASTERPACKv3.0 free extension for WYSIWYG Webbuilder
extension and code: jordan (6j6)
more demo's, info, online manual, etc for jor_aniMateMASTERPACKv3.0 visit jorextensions.com
jor_aniMateMASTERPACKv3.0 free extension for WYSIWYG Webbuilder
extension and code: jordan (6j6)
Hope you found these tutorials informative and useful ...
Module | cycle can be setup and styled in many other ways
This demo should be a good start point to experiment with
Module | cycle can be setup and styled in many other ways
This demo should be a good start point to experiment with
Online Manual
Online Manual - module | cycle
Online Manual - Selectors Simplified..
Online Manual - When do we animate what ?
Online Manual - module | cycle
Online Manual - Selectors Simplified..
Online Manual - When do we animate what ?
Module | cycle full demo
WYSIWYG Webbuilder Forum Topic JMPv3.0
More tutorials for JMPv3.0 see Online Tutorials
More free WB extensions visit jorextensions.com
Back To Top
WYSIWYG Webbuilder Forum Topic JMPv3.0
More tutorials for JMPv3.0 see Online Tutorials
More free WB extensions visit jorextensions.com
Back To Top
We add a WB Text object to our project and target the Text object with the corresponding property
The Text object ID here is named count
It's a WB Text object, so the full ID must become #wb_count
The Text object ID here is named count
It's a WB Text object, so the full ID must become #wb_count
All components used for module | cycle are WB objects that we can place and style as we require
The first WB object we need to activate module | cycle on is a WB SlideShow object
We add a WB SlideShow to our project and target the slideshow with the selector property
The slideshow ID here is named #SlideShow1
The first WB object we need to activate module | cycle on is a WB SlideShow object
We add a WB SlideShow to our project and target the slideshow with the selector property
The slideshow ID here is named #SlideShow1
01. percentage autoplay timer
02. autoplay state text
control | text (ID) = #wb_autostate
Setting up an autoplay state function only makes sense when a stop/play button is set for the slider
Which is what we will do next below in section 03. stop/play button
The setup for the autoplay state is exactly the same as done with the above percentage autoplay timer
We add a WB Text object to our project and target the Text object with the corresponding property
The Text object ID here is named autostate
It's a WB Text object, so the full ID must become #wb_autostate
Which is what we will do next below in section 03. stop/play button
The setup for the autoplay state is exactly the same as done with the above percentage autoplay timer
We add a WB Text object to our project and target the Text object with the corresponding property
The Text object ID here is named autostate
It's a WB Text object, so the full ID must become #wb_autostate
Level: Easy
module | cycle - basic - tutorial
Cycle slider setup
Tutorial 1
Tutorial 2
Cycle slider external control
TUTORIAL
jor_aniMateMASTERPACKv3.0 b5
module | cycle
jor_aniMateMASTERPACKv3.0 b5
module | cycle
SEE LIVE DEMO
DOWNLOAD DEMO
wb slideshow setup
Pause time: = 0
That's all the inputs and actions we have to take to setup the cycle slider
Next we will setup external controls in Tutorial 2
Next we will setup external controls in Tutorial 2
NOTE:
The Text object can be styled and positioned as required
But the Text object should not be broken into styles, use styling on the entire object only
Incorrect: My sample tExst
Correct: My sample text
NOTE:
The Text object can be styled and positioned as required
But the Text object should not be broken into styles, use styling on the entire object only
Incorrect: My sample tExst
Correct: My sample text
That's all the inputs we have to set for the autoplay state text
03. stop/play buttons
We add the WB Image objects to our project and target the Image objects with the corresponding properties
We need two Image objects, one as a stop and another as a play button
Note that we can use most WB Image objects - Shape, Image, ClipArt, TextArt etc
The Image objects IDs here are named play and stop
In this tutorial we use a hover state on the images, therefore we need to add wb_ to the object ID
So, the full IDs here become #wb_play and #wb_stop
We need two Image objects, one as a stop and another as a play button
Note that we can use most WB Image objects - Shape, Image, ClipArt, TextArt etc
The Image objects IDs here are named play and stop
In this tutorial we use a hover state on the images, therefore we need to add wb_ to the object ID
So, the full IDs here become #wb_play and #wb_stop
control | play = #wb_play
control | stop = #wb_stop
control | stop = #wb_stop
That's all the inputs we have to set for the stop/play buttons
That's all the inputs we have to set for the next/previous buttons
next-prev | next = #wb_next
next-prev | prev = #wb_prev
next-prev | prev = #wb_prev
We add the WB Image objects to our project and target the Image objects with the corresponding properties
We need two Image objects, one as a next and another as a previous button
Note that we can use most WB Image objects - Shape, Image, ClipArt, TextArt etc
The Image objects IDs here are named next and prev
In this tutorial we use a hover state on the images, therefore we need to add wb_ to the object ID
So, the full IDs here become #wb_next and #wb_prev
We need two Image objects, one as a next and another as a previous button
Note that we can use most WB Image objects - Shape, Image, ClipArt, TextArt etc
The Image objects IDs here are named next and prev
In this tutorial we use a hover state on the images, therefore we need to add wb_ to the object ID
So, the full IDs here become #wb_next and #wb_prev
04. next/previous buttons
05. pager buttons
We add the WB Image objects to our project and target the Image objects with the corresponding property
We add an Image object for each pager that we want to create, in this tutorial we have setup 10 pagers
The Image object IDs are entered into the pager | pagers property as a string
The Image object IDs here are named from #p1 to #p10
We add an Image object for each pager that we want to create, in this tutorial we have setup 10 pagers
The Image object IDs are entered into the pager | pagers property as a string
The Image object IDs here are named from #p1 to #p10
pager | pagers = #p1,#p2,#p3,#p4,#p5,#p6,#p7,#p8,#p9,#p10
That's all the inputs we have to set for the pager buttons
06. the active pager
We add a WB Image object to our project and target the Image object with the corresponding property
The creative fun with the active pager is, it takes on the dimension and position of the pager image used
In this tutorial we gave pagers different dimensions, the active pager will adopt to it
The Image object ID here is named activepager
The Image object position is animated, it changes, so the full ID must become #wb_activepager
The creative fun with the active pager is, it takes on the dimension and position of the pager image used
In this tutorial we gave pagers different dimensions, the active pager will adopt to it
The Image object ID here is named activepager
The Image object position is animated, it changes, so the full ID must become #wb_activepager
That's all the inputs we have to set for the active pager
pager | active (ID) = #wb_activepager
That's all the inputs and actions we have to take to setup external controls
SEE LIVE DEMO
That's the full basic cycle slider with external control tutorial completed
TIP:
Use the dimension of the largest pager to prevent deformation of the animated active pager image
Let's go over them one by one ... Let's go ...
UPDATE: jor_aniMateMASTERPACKv3.0 build 5.2 update **NEW IMPORTANT**
From JMPv3.0 build 5.2 on the new extension jor_aniMateLIMITER is required to run module | cycle
Read more about jor_aniMateLIMITER - Here
From JMPv3.0 build 5.2 on the new extension jor_aniMateLIMITER is required to run module | cycle
Read more about jor_aniMateLIMITER - Here
Comments, feedback etc regarding this tutorial please post them at the WB Forum Topic JMPv3.0 ...
jordan (6j6)
jordan (6j6)
CYCLE 1 SLIDER VERSION ?
Note that although module | cycle is build on an older version of the original cycle slider - cycle plugin 1 v 3.0.1 is used
Module | cycle is a highly customized version of the slider, with exclusive functions not found in the original cycle 1 plogin
Module | cycle is a great tool for that extra touch of personal design, see also the full module | cycle playground
Note that although module | cycle is build on an older version of the original cycle slider - cycle plugin 1 v 3.0.1 is used
Module | cycle is a highly customized version of the slider, with exclusive functions not found in the original cycle 1 plogin
Module | cycle is a great tool for that extra touch of personal design, see also the full module | cycle playground
See also the full module | cycle playground demo to experience the full flexability of this JMPv3.0 module
