This plugin requires at least WordPress 3.0
Step 1: Installation – http://www.youtube.com/watch?v=YQNKeRU0Ozc
Step 2: Manage Images – http://www.youtube.com/watch?v=6xITUM2HLcw
Step 3: Manage The Layers For Each Slide – https://www.youtube.com/watch?v=150iQ5h-OA4
Step 4: Manage Multiple Banners – http://www.youtube.com/watch?v=_swprVr4rr8
From this section you can:
- add a new banner
-
select the banner you want to edit by clicking "Banner Settings"
- add/edit playlist images by clicking "Playlist"
- delete an existing banner by clicking "Delete"
From this section you can define the video 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 |
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: - imposing - surprise - common |
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 |
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 |
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 |
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 useTarget Window For Link from Banner 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. |
5. Animated Text/Layer Over Image
From this section you can define animated text over the image
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 Opacity | the animation duration (in seconds) |
Delay | delay time (in seconds) |
CSS Styles | here you'll define the css styles for the text. Example: font: bold 24px Verdana, Helvetica, sans-serif; text-transform:uppercase; color:#000000; background:#FFFFFF; padding:10px; |
The shortcode is:
[all_in_one_contentSlider settings_id='1']
where
settings_id is the banner ID defined in "Manage Banners" section
*** For Surprise Skin Non Responsive, we recommend adding the shortcode like this:
<div style="width: 960px; height: 384px; background: url('http://www.your_website.com/wp-content/plugins/all_in_one_contentSlider/contentSlider/skins/surprise/bgSurpriseSkin.png') top center no-repeat;">
[all_in_one_contentSlider settings_id='3']
</div>
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:
Imposing Skin (default)
NO change
Surprise Skin
autoHideNavArrows:false
Common Skin
autoHideNavArrows: false