This plugin requires at least WordPress 3.0
Installation - http://www.youtube.com/watch?v=OiuT8zxKmpI
How To Create A Slider - http://www.youtube.com/watch?v=xYrOMaUalso
How To Add The Layers - https://www.youtube.com/watch?v=nIxHarBvEP4
How To Use It As FullScreen Background For A Single Page/Post- https://www.youtube.com/watch?v=7SKWd2fspg8
How To Use It As FullScreen Background For Entire Website- http://www.youtube.com/watch?v=PoqrBup7QrM
From this section you can:
- add a new slider
-
select the banner you want to edit by clicking "Slider Settings"
- add/edit playlist images by clicking "Playlist"
- delete an existing slider by clicking "Delete"
- duplicate an existing slider by clicking "Duplicate"
From this section you can define the banner settings.
General Settings | |
Banner Width | banner width |
Banner Height | banner height |
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 |
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 |
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: - opportune - majestic - generous |
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' |
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 |
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 |
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 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 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 |
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 |
Hide Next&Previous Button Under This Resolution | the resolution under which the 'next' & 'previous' navigation buttons will not be visible. If you set 0 this parameter will be ignored and the navigation buttons will be always visible no matter the screen resolution. |
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 (text line or image) over the image
Initial Left | the layer left initial postion (in pixels) |
Initial Top | the layer top initial postion (in pixels) |
Final Left | the layer top initial postion (in pixels) |
Final Top | the layer top final postion (in pixels) |
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 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. |
Initial CSS3 Animation | The initial CSS3 prebuilt animation for layer. Possible values: alreadyRotate alreadyRotate_90 awesome awesome ul awesome ul li bigEntrance boingInUp boingOutDown bombLeftOut bombRightOut bounce bounceIn bounceOut changeColorToRed changeColorToBlack changeColorToWhite changeColorToOrange changeColorToPink CoolBaloonFixed CoolBaloonFullWidth CoolCloud1 CoolCloud2 CoolCloud3 coolBarBottom coolBarCenter coolBarCenterFixed coolBarRight coolBarLeft coolBarRightMin coolBarLeftMin coolBarRightMinRegular coolBarLeftMinRegular dance expandUp fadeIn flash flashBang flip flipBookCenter_Cover1 flipBookCenter_Cover2 flipBookLeft_Cover1 flipBookLeft_Cover2 flipBookRight_Cover3 flipBookRight_Cover4 flipInX flipInY flipOutX flipOutY flipXFast3d flipX3dPerpetuum flipY3dPerpetuum flipYFastRight3d flipYFastLeft3d flipYFastRight3dChangeColor flipYFastLeft3dChangeColor flipYFastLeft3dSpecialColor flipYFastLeft3dSpecialColor2 floating floatingEasy foolishIn foolishOut hatch hinge hinge2 holeOut jamp jello journal lightSpeedInLeft lightSpeedInRight lightSpeedOutRight lightSpeedOutLeft magic magnifying magnifyingStop openDownRight openUpLeft openUpRight openDownLeftRetourn openDownRightRetourn openUpLeftRetourn openUpRightRetourn openDownLeftOut openDownRightOut openUpLeftOut openUpRightOut perpetuumChainLink1 perpetuumChainLink2 perspectiveLeft perspectiveRight perspectiveRightIn perspectiveUp perspectiveDownZero perspectiveDown perspectiveLeftRetourn perspectiveRightRetourn perspectiveUpRetourn perspectiveDownRetourn rollInRight rollInLeft rollOutRight rollOutLeft rotateEaseForward rotateEaseBackward rotateFastForward rotateFastBackward rotateLeft rotateRight rotateUp rotateDown rotateInRight rotateInLeft rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight rubberBand scaleBounce scaleIn scaleInMin scaleInExit scaleInExitBounce scaleOut scaleOutBounce shake skew slideDown slideUp slideLeft slideRight slideExpandUp snow1 snow2 snow3 spaceInUp spaceInDown spaceInLeft spaceInRight spaceOutUp stretchRight swap swashIn swashOut swing tada typing_and_erasing typing tinLeftIn tinRightIn tinUpIn tinDownIn tinLeftOut tinRightOut tinUpOut tinDownOut tossing twisterInUp twisterInDown vanishIn vanishOut wobble zoomIn zoomOut zoomOutSlowly zoomInRight zoomInUp zoomInDown zoomOutLeft zoomOutRight zoomOutUp zoomOutDown planeFW planeFWFixed planeBW planeBWFixed planeBW2 magnifyingBounce stamp returnsToZero pulse pullLeftBoxRegularRZ lbg1_bgk slideBox_RightFromLeft slideBox_LeftFromRight slideBox_RightFromLeft_min slideBox_LeftFromRight_min slideBox_TopFromBottom slideBox_BottomFromTop slideBox_TopFromBottom_min slideBox_BottomFromTop_min slideBox_TopFromBottom_full slideBox_TopFromBottom_full_min |
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 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 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 |
Exit CSS3 Animation | The exit CSS3 prebuilt animation for layer. Possible values: alreadyRotate alreadyRotate_90 awesome awesome ul awesome ul li bigEntrance boingInUp boingOutDown bombLeftOut bombRightOut bounce bounceIn bounceOut changeColorToRed changeColorToBlack changeColorToWhite changeColorToOrange changeColorToPink CoolBaloonFixed CoolBaloonFullWidth CoolCloud1 CoolCloud2 CoolCloud3 coolBarBottom coolBarCenter coolBarCenterFixed coolBarRight coolBarLeft coolBarRightMin coolBarLeftMin coolBarRightMinRegular coolBarLeftMinRegular dance expandUp fadeIn flash flashBang flip flipBookCenter_Cover1 flipBookCenter_Cover2 flipBookLeft_Cover1 flipBookLeft_Cover2 flipBookRight_Cover3 flipBookRight_Cover4 flipInX flipInY flipOutX flipOutY flipXFast3d flipX3dPerpetuum flipY3dPerpetuum flipYFastRight3d flipYFastLeft3d flipYFastRight3dChangeColor flipYFastLeft3dChangeColor flipYFastLeft3dSpecialColor flipYFastLeft3dSpecialColor2 floating floatingEasy foolishIn foolishOut hatch hinge hinge2 holeOut jamp jello journal lightSpeedInLeft lightSpeedInRight lightSpeedOutRight lightSpeedOutLeft magic magnifying magnifyingStop openDownRight openUpLeft openUpRight openDownLeftRetourn openDownRightRetourn openUpLeftRetourn openUpRightRetourn openDownLeftOut openDownRightOut openUpLeftOut openUpRightOut perpetuumChainLink1 perpetuumChainLink2 perspectiveLeft perspectiveRight perspectiveRightIn perspectiveUp perspectiveDownZero perspectiveDown perspectiveLeftRetourn perspectiveRightRetourn perspectiveUpRetourn perspectiveDownRetourn rollInRight rollInLeft rollOutRight rollOutLeft rotateEaseForward rotateEaseBackward rotateFastForward rotateFastBackward rotateLeft rotateRight rotateUp rotateDown rotateInRight rotateInLeft rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight rubberBand scaleBounce scaleIn scaleInMin scaleInExit scaleInExitBounce scaleOut scaleOutBounce shake skew slideDown slideUp slideLeft slideRight slideExpandUp snow1 snow2 snow3 spaceInUp spaceInDown spaceInLeft spaceInRight spaceOutUp stretchRight swap swashIn swashOut swing tada typing_and_erasing typing tinLeftIn tinRightIn tinUpIn tinDownIn tinLeftOut tinRightOut tinUpOut tinDownOut tossing twisterInUp twisterInDown vanishIn vanishOut wobble zoomIn zoomOut zoomOutSlowly zoomInRight zoomInUp zoomInDown zoomOutLeft zoomOutRight zoomOutUp zoomOutDown planeFW planeFWFixed planeBW planeBWFixed planeBW2 magnifyingBounce stamp returnsToZero pulse pullLeftBoxRegularRZ lbg1_bgk slideBox_RightFromLeft slideBox_LeftFromRight slideBox_RightFromLeft_min slideBox_LeftFromRight_min slideBox_TopFromBottom slideBox_BottomFromTop slideBox_TopFromBottom_min slideBox_BottomFromTop_min slideBox_TopFromBottom_full slideBox_TopFromBottom_full_min |
Intermediate Move Parameters | |
Intermediate Left | the layer intermediate move left postion (in pixels) |
Intermediate Top | the layer intermediate move top postion (in pixels) |
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) |
Intermediate CSS3 Animation | The Intermediate CSS3 prebuilt animation for layer. Possible values: alreadyRotate alreadyRotate_90 awesome awesome ul awesome ul li bigEntrance boingInUp boingOutDown bombLeftOut bombRightOut bounce bounceIn bounceOut changeColorToRed changeColorToBlack changeColorToWhite changeColorToOrange changeColorToPink CoolBaloonFixed CoolBaloonFullWidth CoolCloud1 CoolCloud2 CoolCloud3 coolBarBottom coolBarCenter coolBarCenterFixed coolBarRight coolBarLeft coolBarRightMin coolBarLeftMin coolBarRightMinRegular coolBarLeftMinRegular dance expandUp fadeIn flash flashBang flip flipBookCenter_Cover1 flipBookCenter_Cover2 flipBookLeft_Cover1 flipBookLeft_Cover2 flipBookRight_Cover3 flipBookRight_Cover4 flipInX flipInY flipOutX flipOutY flipXFast3d flipX3dPerpetuum flipY3dPerpetuum flipYFastRight3d flipYFastLeft3d flipYFastRight3dChangeColor flipYFastLeft3dChangeColor flipYFastLeft3dSpecialColor flipYFastLeft3dSpecialColor2 floating floatingEasy foolishIn foolishOut hatch hinge hinge2 holeOut jamp jello journal lightSpeedInLeft lightSpeedInRight lightSpeedOutRight lightSpeedOutLeft magic magnifying magnifyingStop openDownRight openUpLeft openUpRight openDownLeftRetourn openDownRightRetourn openUpLeftRetourn openUpRightRetourn openDownLeftOut openDownRightOut openUpLeftOut openUpRightOut perpetuumChainLink1 perpetuumChainLink2 perspectiveLeft perspectiveRight perspectiveRightIn perspectiveUp perspectiveDownZero perspectiveDown perspectiveLeftRetourn perspectiveRightRetourn perspectiveUpRetourn perspectiveDownRetourn rollInRight rollInLeft rollOutRight rollOutLeft rotateEaseForward rotateEaseBackward rotateFastForward rotateFastBackward rotateLeft rotateRight rotateUp rotateDown rotateInRight rotateInLeft rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight rubberBand scaleBounce scaleIn scaleInMin scaleInExit scaleInExitBounce scaleOut scaleOutBounce shake skew slideDown slideUp slideLeft slideRight slideExpandUp snow1 snow2 snow3 spaceInUp spaceInDown spaceInLeft spaceInRight spaceOutUp stretchRight swap swashIn swashOut swing tada typing_and_erasing typing tinLeftIn tinRightIn tinUpIn tinDownIn tinLeftOut tinRightOut tinUpOut tinDownOut tossing twisterInUp twisterInDown vanishIn vanishOut wobble zoomIn zoomOut zoomOutSlowly zoomInRight zoomInUp zoomInDown zoomOutLeft zoomOutRight zoomOutUp zoomOutDown planeFW planeFWFixed planeBW planeBWFixed planeBW2 magnifyingBounce stamp returnsToZero pulse pullLeftBoxRegularRZ lbg1_bgk slideBox_RightFromLeft slideBox_LeftFromRight slideBox_RightFromLeft_min slideBox_LeftFromRight_min slideBox_TopFromBottom slideBox_BottomFromTop slideBox_TopFromBottom_min slideBox_BottomFromTop_min slideBox_TopFromBottom_full slideBox_TopFromBottom_full_min |
The shortcode is:
[lbg_zoominoutslider settings_id='1']
where
settings_id is the banner ID defined in "Manage Sliders" section
7. Recommended Values for Each Skin
Of course, you can change the default settings as you wish but this is our recommandation.
We recommend you to change some default settings for the skins as follows:
Opportune Skin (default)
NO change
Majestic Skin
numberOfThumbsPerScreen:8,
thumbsOnMarginTop:23,
thumbsWrapperMarginTop: 0
Generous Skin
numberOfThumbsPerScreen:7,
thumbsOnMarginTop:14,
thumbsWrapperMarginTop: -110,
autoHideBottomNav:true