LambertGroup - AllInOne - Banner With Playlist

This plugin requires at least WordPress 3.0

 

 

Video Tutorials

Step 1: Installation – http://www.youtube.com/watch?v=nYp94Ri8CME
Step 2: Manage Images – http://www.youtube.com/watch?v=gQezs4xWwSs
Step 3: Manage Text Over Image – https://www.youtube.com/watch?v=X5qp3NsepiU
Step 4: Manage Multiple Banners – http://www.youtube.com/watch?v=3EfdmbjTvoY

 

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 all_in_one_bannerWithPlaylist.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_bannerWithPlaylist settings_id='1']
click here for more details regarding the shortcode

 

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
bannerWithPlaylist 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_bannerWithPlaylist.php the plugin itself
   

 

Manage Banners

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.

 

Banner Settings

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:
- pureGallery
- elegant
- easy
Randomize Images

Possible values:
true - it will navigate the images in a random manner
false - it will navigate the images as they are defined

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:

  • fade
  • slideFromLeft
  • slideFromRight
  • slideFromTop
  • slideFromBottom
  • alternateSlide
  • topBottomDroppingStripe
  • topBottomDroppingReverseStripes
  • bottomTopDroppingStripes
  • bottomTopDroppingReverseStripes
  • asynchronousDroppingStripes
  • leftRightFadingStripes
  • leftRightFadingReverseStripes
  • topBottomDiagonalBlocks
  • topBottomDiagonalReverseBlocks
  • randomBlocks
  • random
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
Border Width border width
Border Color border color (hexa)
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 - thumbs will appear in playlist
false - thumbs will not appear not appear in playlist
Playlist Width playlist width
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 3
Thumbnail Width playlist thumbnail width (for skins that have a thumbnail)
Thumbnail Height playlist thumbnail height (for skins that have a thumbnail)
   
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
   

 

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 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
Playlist Title playlist title
Playlist Description playlist description
   

 

Animated Text 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;
   

 

 

ShortCode

The shortcode is:
[all_in_one_bannerWithPlaylist 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:

Elegant Skin (default)
NO change

PureGallery Skin
borderWidth: 0
playlistWidth: 214

Easy Skin
borderWidth: 0
playlistWidth: 250
showThumbs: false
numberOfThumbsPerScreen: 4

 

Particularities

If you have in the top of your page

<!DOCTYPE html>

the line height of elegant playlist will not be modified for responsive version. There are 2 solutions:

Solution 1. Remove <!DOCTYPE html>
Solution 2: Replace it with <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">