UberSlider - Classic

This plugin requires at least WordPress 3.0

 

 

1. Video Tutorials

Step 1: Installation – https://www.youtube.com/watch?v=sp7TvIDlnVs
Step 2: Create a Slider – https://www.youtube.com/watch?v=vXOkiXm4vYo
Step 3: Add Layers – https://www.youtube.com/watch?v=YgZl1qgcFPs
Step 4: Manage Multiple Sliders – https://www.youtube.com/watch?v=lWJNfu3iTQA

 

2. Plugin Instalation

Step 1. Enter in your wordpress CMS and go to Plugins menu
Step 2. Under Plugins menu click "Add New"
Step 3. Select "Upload", choose the archive uberSlider_classic.zip that you downloaded and hit "Install Now"
Step 4. After the plugin is installed click "Activate Plugin"
Step 5. In you page just add the shortcode: [uberSliderClassic settings_id='1']
click here for more details regarding the shortcode

 

3. Files & Folders Structure

css the folder contains the .css files used by the pluging
images the folder contains the images used by the pluging
js the folder contains the .js files used by the pluging
classic the folder contains the .js & .css files that the video slider use.
tpl the folder contains the template files used by the pluging
uberSliderClassic.php the plugin itself
   

 

4. Manage Sliders

From this section you can define the sliders.
If you need to include multiple sliders in your pages with different settings and playlist you can define the sliders and manage the settings for each one.
If you need only one slider in your website, just edit the default one.

 

5. Slider Settings

From this section you can define the video slider settings.

General Settings
Slider Width slider width
Slider Height slider height
Width 100% Possible values:
true - the slider width will be 100%
false - the slider width will be what you've set for 'width' parameter
Center Plugin Possible values:
true - the banner will be centered on the page
false - the banner will be centered on the page
Skin Name available skins:
- bullets
- thumbs
Responsive Possible values:
true - the slider will responsive
false - the slider will not be responsive
Responsive Relative To Browser Possible values:
true - the slider will be responisve relatively to browser dimensions
false - the slider will be responisve relatively to parent div
Auto Play You can define the time (in seconds) until the next photo will play. If you set it 0 the slider will not autoplay
Loop Possible values:
true - the slider will loop when reaches the end
false - the slider will stop when reaches the end
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
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
Pause On Mouse Over Possible values:
true - enables autoPlay pause on mouse over
false - disables autoPlay pause on mouse over
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

Default Easing
for texts/elements over main image
The defaut easing for layer animation. By layer, we understand a text or an image/text 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
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

*** If needed, for each element you can set particular easing, usind 'data-easing' parameter. Please refer to Animated Layers (text/image) Over Main Image section

NOTE: if you want to see the exit move, we recommend these values:
scrollSlideDuration:1.8,
scrollSlideEasing:'easeInQuint',

Enable Touch Screen Possible values:
true - mobile touch screen support enabled
false - mobile touch screen support disabled
 
Default Exit Left Position
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 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 slider init
false - next, previous buttons will not appear on first slider 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 slider init
false - bottom navigations buttons will not appear on first slider 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
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
Bottom Navigation - margin-bottom the vertical pozition of the bottom navigation area
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
   
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
   

 

6. 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:
'_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

*** If all your links will behave the same, you can ignore this parameter and useTarget 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.

 

7. Animated Layers (text/image) Over Main Image

From this section you can define animated layer (text/image) over the image

General Settings
HTML Content/Image Title HTML content for text layer/image title for image layer
Element Link layer link
Element Link Target layer link target
Preanimate Possible values:
true - the layer will be preanimated and will appear in the final position, without animation
false - the layer will animate from initial to final position. Is the parameter is not present, false value is used by default.
Enter Values
Initial Left the text left initial postion (in pixels)
Initial Top the text top initial postion (in pixels)
Final Left the text top initial postion (in pixels)
Final Top the text top final postion (in pixels)
Duration the animation duration (in seconds)
Initial Fade/Opacity initial fade value. Values from 0 to 100
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
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce
Exit Values
Exit Left the left position, for layer exit (in pixels)
Exit Top

the top position, for layer exit (in pixels)

Exit Duration

the duration, for layer exit (in seconds)

Exit Delay

the time delay, for layer exit (in seconds)

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
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce
Cancel Exit Possible values:
true - the layer will not exit
false - the layer will exit according to exit left, top, delay, duration and easing value
   

 

 

8. ShortCode

The shortcode is:
[uberSliderClassic settings_id='1']
where
settings_id is the slider ID defined in "Manage Sliders" section