This plugin requires at least WordPress 3.0
Step 1: Installation – http://www.youtube.com/watch?v=iQwgvbDhmH4
Step 2: Manage Images – http://www.youtube.com/watch?v=agToQ_Hib2Y
Step 3: Manage Text Over Image – https://www.youtube.com/watch?v=0uyv9gOHWag
Step 4: Manage Multiple Banners – http://www.youtube.com/watch?v=40HwlIZxcE0
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 all_in_one_thumbnailsBanner.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: [all_in_one_thumbnailsBanner settings_id='1']
click here for more details regarding the shortcode
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 |
thumbnailsBanner | the folder contains the .js & .css files that the video banner use. |
tpl | the folder contains the template files used by the pluging |
all_in_one_thumbnailsBanner.php | the plugin itself |
From this section you can define the banners.
If you need to include multiple banners in your pages with different settings and playlist you can define the banners and manage the settings for each one.
If you need only one banner in your website, just edit the default one.
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: - cool - simple - crazy |
Randomize Images | Possible values: |
First Image Number | Define which image will be the first one to load. The conunting starts from 0 |
Number Of Stripes | The number of vertical stripes |
Number Of Rows | This paramenter is used for transitions/effects which use blocks - defines the number of rows. You can consider the blocks are arranged in a table. |
Number Of Columns | This paramenter is used for transitions/effects which use blocks - defines the number of colums. You can consider the blocks are arranged in a table. |
Default Effect | You can define a general transition effect for all images. The available options are:
|
Effect Duration | The effect duration (in seconds) |
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 Thumbs | Possible values: true - bottom thumbs will appear false - bottom thumbs will not appear |
Show Thumbs On Init | Possible values: true - bottom thumbs will appear on first banner init false - bottom thumbs will not appear on first banner init |
Auto Hide Thumbs | Possible values: true -bottom thumbs will hide when mouse out false - bottom thumbs will not hide when mouse out |
Number Of Thumbs Per Screen | Number of visible thumbs per each screen. If you set it to 0, it will be calculated automatically. You can set a fixed number, for example 7 |
Thumbs Reflection | Thumbs reflection transparency. Values from 0 - 100. For 0 no reflection will appear. |
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 |
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 |
Image Effect | you can define a particular transition effect for each image. If you leave this blank, the default transition effect will be used |
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_thumbnailsBanner settings_id='1']
where
settings_id is the banner ID defined in "Manage Banners" section
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:
Cool Skin (default)
NO change
Simple Skin
thumbsReflection: 0
Crazy Skin
NO change