This plugin requires at least WordPress 3.0
Step 1: Installation - http://www.youtube.com/watch?v=FSO1JjQq6O8
Step 2: How To Create A Slider - http://www.youtube.com/watch?v=-_s2YQSiTu4
Step 3: How To Add The Layers - http://www.youtube.com/watch?v=UKB_5h9LWc8
Step 4: How To Use It As FullScreen Background - http://www.youtube.com/watch?v=7H7yN3PTH_A
From this section you can:
- add a new banner
-
select the banner you want to edit by clicking "Slider Settings"
- add/edit playlist images by clicking "Playlist"
- delete an existing banner by clicking "Delete"
From this section you can define the banner settings.
| General Settings | |
| Banner Width | banner width |
| Banner Height | banner height |
| Width 100% | Possible values: true - the banner width will be 100% false - the banner width will be what you've set for 'width' parameter |
| Height 100% | Possible values: true - the banner height will be 100% false - the banner height will be what you've set for 'height' parameter |
| Center Plugin | Possible values: true - the banner will be centered on the page false - the banner will be centered on the page |
| Responsive | Possible values: true - the banner will responsive false - the banner will not be responsive |
| Responsive Relative To Browser | Possible values: true - the banner will be responisve relatively to browser dimensions false - the banner will be responisve relatively to parent div |
| Skin Name | available skins: - bullets - thumbs |
| Auto Play | You can define the time (in seconds) until the next photo will play. If you set it 0 the banner will not autoplay |
| Loop | Possible values: true - the banner will loop when reaches the end false - the banner will stop when reaches the end |
| Fade Slides | Possible values: true - the transition between the slides will be 'Fade' false - the transition between the slides will be 'Slide' |
| Target Window For Link | Possible values: '_blank' - the link associated to the primary photo will open in a new window '_slef'- the link associated to the primary photo will open in the same window |
| Enable Touch Screen | Possible values: true - mobile touch screen support enabled false - mobile touch screen support disabled |
| Preload Time | the delay time (in seconds) to postpone the slider start. In this time, a rotating cicle will appear in the middle of the slider to signal that the slider is in loading status |
| Pause On Mouse Over | Possible values: true - enables autoPlay pause on mouse over false - disables autoPlay pause on mouse over |
| Set As Background | Possible values: true - if you intend to use the plugin as full screen background false - if you don't intend to use the plugin as full screen background |
| Scroll Slide Duration | Time to make the transition/animation from one slide to another |
| Scroll Slide Easing | The animation (from one slide to another) easing. Possible values: linear swing easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInQuint easeOutQuint easeInOutQuint easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce |
| Default Easing for texts/elements over main image |
The defaut easing for layer animation. By layer, we understand a text or an image which comes over the main image. Possible values: linear swing ease ease-in ease-out ease-in-out easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInQuint easeOutQuint easeInOutQuint easeInCirc easeOutCirc easeInOutCirc easeInBack easeOutBack easeInOutBack |
| Zoom In/Out Effect Settings | |
| Default Horizontal Position | Using this parameter the script will determine both the photo initial horizontal pozition and zoom effect direction Possible values: - left - center - right |
| Default Vertical Position | Using this parameter the script will determine both the photo initial vertical pozition and zoom effect direction Possible values: - top - center - bottom |
| Default Initial Zoom | initial photo zoom value. We recommend values between 0.5 - 1 |
| Default Final Zoom | final photo zoom value. We recommend values between 0.5 - 1 |
| Default Zoom In/Out Effect Duration | the Zoom In/Out effect duration in seconds |
| Zoom In/Out Effect IE Duration Fix | this value will be added to the 'duration' value for IE (versions under IE10) browsers if Width 100%=true. This is done because IE doesn't support css3 transitions and IE rendering engine is very poor. For IE browsers, if we have full width or full screen banners we need to make the move slower. |
| Zoom Effect Easing | The KenBurns effect default easing |
| Default Exit Move Parameters | |
| Default Exit Left Position | the default left position, for layer exit (in pixels) |
| Default Exit Top Position | the default top position, for layer exit (in pixels) |
| Default Exit Duration | the default duration, for layer exit (in seconds) |
| Default Exit Fade | the default opacity value, for layer exit (values between 0-1) |
| Default Exit Delay | the default time delay, for layer exit (in seconds) |
| Default Exit Easing | the default easing, for layer exit (in pixels) Possible values: linear swing ease ease-in ease-out ease-in-out easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInQuint easeOutQuint easeInOutQuint easeInCirc easeOutCirc easeInOutCirc easeInBack easeOutBack easeInOutBack |
| Disable Exit Move (default value) | Possible values: true - the layers will not exit false - the layers will exit according to exit left, top, delay, duration and easing value |
| Controllers Settings | |
| Show All Controllers | Possible values: true - all controllers will appear (next, previous, bottom navigation) false - all controllers will not appear (next, previous, bottom navigation) |
| Show Navigation Arrows | Possible values: true - next, previous buttons will appear false - next, previous buttons will not appear |
| Show Navigation Arrows On Init | Possible values: true - next, previous buttons will appear on first banner init false - next, previous buttons will not appear on first banner init |
| Auto Hide Navigation Arrows | Possible values: true - next, previous buttons will hide when mouse out false - next, previous buttons will not hide when mouse out |
| Show Bottom Navigation | Possible values: true - bottom navigation buttons will appear false -bottom navigation buttons will not appear |
| Show Bottom Navigation On Init | Possible values: true - bottom navigation buttons will appear on first banner init false - bottom navigations buttons will not appear on first banner init |
| Auto Hide Bottom Navigation | Possible values: true -bottom navigations buttons will hide when mouse out false - bottom navigations buttons will not hide when mouse out |
| Show Preview Thumbs | Possible values: true - a preview image will appear on hovering each bottom button false - the preview image will not appear on hovering each bottom button |
| Bottom Navigation - margin-bottom | the vertical pozition of the bottom navigation area |
| Thumbs Settings | |
| Number Of Thumbs Per Screen | the number of thumbs per screen. If you set it to 0, it will be calculated automatically. You can set a fixed number, for example 4 |
| Thumbs On Margin Top | for the thumbs that are on, there is an arrow pointing the active thumb. Using this parameter you can change the vertical position of this arrow |
| Thumbs Wrapper Margin Top | the vertical pozition of the thumbs area |
| Circle Timer Settings | |
| Show Circle Timer | Possible values: true - shows the circle timer false - hides the circle timer |
| Circle Radius | circle radius |
| Circle Line Width | circle line width |
| Circle Color | circle color, in hexa |
| Circle Alpha | circle alpha, in percents. Posible values 0-100 |
| Behind Circle Color | behind circle color, in hexa |
| Behind Circle Alpha | behind circle alpha, in percents. Posible values 0-100 |
From this section you can define images in the playlist
| Image | URL to the large image |
| Link For The Image | You can specify a link associated to the primary photo |
| Link Target | Possible values: *** If all your links will behave the same, you can ignore this parameter and use Target Window For Link from Slider Settings |
| Thumbnail | URL to the thumbnail image |
| Image Title / Alternative Text | alternative text used to populate "alt" tag |
| Video Beneath Image | Possible values: true - if you have video content beneath main photo false - if you don'thave video content beneath main photo |
| Content | The content (other than the large image). It can be a video beheath the large image or a HTML content if you don't have a large image. |
| Particular AutoPlay | You can define for each slide the time (in seconds) until the next slide will play. If you set it 0 the slider will ignore it and the default 'Auto Play' value from 'Slider Settings' section, will be used |
| Horizontal Position | Using this parameter the script will determine both the photo initial horizontal pozition and zoom effect direction If you don't select a value, 'Default Horizontal Position value from 'Slider Settings' will be used |
| Vertical Position | Using this parameter the script will determine both the photo initial vertical pozition and zoom effect direction If you don't select a value, 'Default Vertical Position' value from 'Slider Settings' will be used |
| Initial Zoom | initial photo zoom value. We recommend values between 0.5 - 1 If you leave it blank, 'Default Initial Zoom' value from 'Slider Settings' will be used |
| Final Zoom | final photo zoom value. We recommend values between 0.5 - 1 If you leave it blank, 'Default Final Zoom' value from 'Slider Settings' will be used |
| Zoom In/Out Effect Duration | the Zoom In/Out effect duration in seconds. If you leave it blank, 'Default Zoom In/Out Effect Duration' value from 'Slider Settings' will be used |
| Zoom Effect Easing | The KenBurns effect easing If you leave it blank, 'Default Zoom Effect Easing' value from 'Slider Settings' will be used |
From this section you can define animated layers over the image
| Initial Left | the layer left initial postion (in pixels) |
| Initial Top | the layer top initial postion (in pixels) |
| Intial Scale | the layer initial scale value. Example: 0 For more information please check http://www.w3schools.com/css/css3_2dtransforms.asp |
| Initial Skew | the layer initial skew value. Example: 50deg,0deg For more information please check http://www.w3schools.com/css/css3_2dtransforms.asp |
| Final Left | the layer top initial postion (in pixels) |
| Final Top | the layer top final postion (in pixels) |
| Final Scale | the layer final scale value. Example: 1 For more information please check http://www.w3schools.com/css/css3_2dtransforms.asp |
| Final Skew | the layer final skew value. Example: 0deg,0deg For more information please check http://www.w3schools.com/css/css3_2dtransforms.asp |
| Duration | the animation duration (in seconds) |
| Initial Opacity | the animation duration (in seconds) |
| Delay | delay time (in seconds) |
| Easing | The easing for layer animation. Possible values: linear swing ease ease-in ease-out ease-in-out easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInQuint easeOutQuint easeInOutQuint easeInCirc easeOutCirc easeInOutCirc easeInBack easeOutBack easeInOutBack *** If this parameter is not added, the value of JS parameter 'Default Easing, will be used. Please refer to Slider Settings section. |
| Exit Move Parameters | |
| Exit Left | the left position, for layer exit (in pixels) *** If this parameter is not added, the value of JS parameter 'Default Exit Left', will be used. Please refer to Slider Settings section |
| Exit Top | the top position, for layer exit (in pixels) *** If this parameter is not added, the value of JS parameter 'Default Exit Top', will be used. Please refer to Slider Settings section |
| Exit Skew | the layer exit move skew value. Example: 50deg,0deg For more information please check http://www.w3schools.com/css/css3_2dtransforms.asp |
| Exit Scale | the layer exit move scale value. Example: 0 For more information please check http://www.w3schools.com/css/css3_2dtransforms.asp |
| Exit Duration | the duration, for layer exit (in seconds) *** If this parameter is not added, the value of JS parameter 'Default Exit Duration', will be used. Please refer to Slider Settings section |
| Exit Delay | the time delay, for layer exit (in seconds) *** If this parameter is not added, the value of JS parameter 'Default Exit Delay', will be used. Please refer to Slider Settings section |
| Exit Fade | exit fade value. Values from 0 to 1 *** If this parameter is not added, the value of JS parameter 'Default Exit Fade', will be used. Please refer to Slider Settings section |
| Exit Easing | The easing for layer exit animation. Possible values: linear swing ease ease-in ease-out ease-in-out easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInQuint easeOutQuint easeInOutQuint easeInCirc easeOutCirc easeInOutCirc easeInBack easeOutBack easeInOutBack *** If this parameter is not added, the value of JS parameter 'Default Exit Easing, will be used. Please refer to Slider Settings section |
| Cancel Exit | Possible values: *** If this parameter is not added, the value of JS parameter 'Default Exit OFF', will be used. Please refer to Slider Settings section |
| Intermediate Move Parameters | |
| Intermediate Left | the layer intermediate move left postion (in pixels) |
| Intermediate Top | the layer intermediate move top postion (in pixels) |
| Intermediate Skew | the layer intermediate move skew value. Example: 50deg,0deg For more information please check http://www.w3schools.com/css/css3_2dtransforms.asp |
| Intermediate Scale | the layer intermediate move scale value. Example: 0 For more information please check http://www.w3schools.com/css/css3_2dtransforms.asp |
| Intermediate Duration | the layer intermediate move duration (in seconds) |
| Intermediate Easing | The intermediate move easing Possible values:
|
| Intermediate Delay | the layer intermediate move delay time (in seconds) |
The shortcode is:
[magic_slider settings_id='1']
where
settings_id is the banner ID defined in "Manage Sliders" section