Help

Files Structure

css file
skins folder
js folder
images folder
html files

css file

The product uses banner.css file which contains the skin and texts classes

skins folder

The images used by the skins are located in this folder and distributed in subfolders with the skin name.

js folder

All the .js files are located in this folder. The product uses jquery. The product is generated by banner.js

images folder

We put all the images in this folder. If needed, you can use a different one.

html files

For your convenience we've created for each skin and type (fixed dimensions, full width, full screen, sibar banners) a .html file. In each file you'll find all the necessary code for implementation for each skin and example.

HTML/JS code for implementation

Step 1: Copy on your server/project the following files and folders: images, js, skins, banner.css. Of course you can move the files in other folders, but you'll take care to correct the paths to the files
Step 2: Open the .html file associated with the skin & example you want to use. For example, if you want to use "Opportune" skin with Fixed DImension open opportuneFixedDimensions.html
Step 3: Put the below code in the <head> section of your file. This code has to be copied from the <head> section of the file you opened (EX: opportuneFixedDimensions.html) to assure you include the skin & example correctly. Don't forget to set responsive: false, in case you don't need resposnisve behavior.

<link href="banner.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

jQuery('#banner').banner({
skin: 'opportune',
responsive:true,
width: 940,
height: 364,
circleRadius:8,
circleLineWidth:4,
circleColor: "#ffffff", //849ef3
circleAlpha: 50,
behindCircleColor: "#000000",
behindCircleAlpha: 20,
thumbsWrapperMarginTop:30
});

});
</script>

Step 4: In the <body> section copy the code below. This code has to be copied from the <body> section of the file you opened (EX: opportuneFixedDimensions.html) to assure you include the skin correctly.

</ul>


<div id="banner_photoText1" class="banner_texts">
<div class="banner_text_line textElement11_opportune" data-initial-left="50" data-initial-top="10" data-final-left="50" data-final-top="40" data-duration="0.5" data-fade-start="0" data-delay="0">Ultra-Smooth Zoom In/Out Effect</div>
<div class="banner_text_line textElement12_opportune" data-initial-left="50" data-initial-top="10" data-final-left="50" data-final-top="70" data-duration="0.5" data-fade-start="0" data-delay="0.3">Customizable with many <a href="http://codecanyon.net/user/LambertGroup" target="_blank">parameters</a></div>
</div>

<div id="banner_photoText2" class="banner_texts">
<div class="banner_text_line textElement21_opportune" data-initial-left="50" data-initial-top="0" data-final-left="50" data-final-top="260" data-duration="0.5" data-fade-start="0" data-delay="0">For each image</div>
<div class="banner_text_line textElement22_opportune" data-initial-left="50" data-initial-top="384" data-final-left="50" data-final-top="240" data-duration="0.5" data-fade-start="0" data-delay="0.3">You can define optional external link</div>
</div>

<div id="banner_photoText4" class="banner_texts">
<div class="banner_text_line textElement41_opportune" data-initial-left="480" data-initial-top="60" data-final-left="50" data-final-top="60" data-duration="0.5" data-fade-start="0" data-delay="0">Animated text from any direction</div>
<div class="banner_text_line textElement42_opportune" data-initial-left="0" data-initial-top="80" data-final-left="50" data-final-top="80" data-duration="0.5" data-fade-start="0" data-delay="0.3">top, bottom, left and right</div>
<div class="banner_text_line textElement43_opportune" data-initial-left="50" data-initial-top="250" data-final-left="50" data-final-top="110" data-duration="1" data-fade-start="0" data-delay="0.5">Any color, CSS and HTML formated</div>
</div>

<div id="banner_photoText5" class="banner_texts">
<div class="banner_text_line textElement51_opportune" data-initial-left="75" data-initial-top="50" data-final-left="75" data-final-top="50" data-duration="0.5" data-fade-start="0" data-delay="0">Certainly this is the collection of ZoomInOut sliders<br />
that you have longed for. Grab it now!</div>
<div class="banner_text_line textElement52_opportune" data-initial-left="300" data-initial-top="105" data-final-left="180" data-final-top="105" data-duration="0.5" data-fade-start="0" data-delay="0.3">MORE<br />ZoomInOut<br />SKINS</div>
<div class="banner_text_line textElement53_opportune" data-initial-left="65" data-initial-top="250" data-final-left="65" data-final-top="80" data-duration="1" data-fade-start="0" data-delay="0.5">2</div>
<div class="banner_text_line textElement54_opportune" data-initial-left="185" data-initial-top="233" data-final-left="185" data-final-top="233" data-duration="1" data-fade-start="0" data-delay="0.5"><a href="http://codecanyon.net/user/LambertGroup" target="_blank">Enjoy Them RIGHT HERE!</a></div>
</div>

<div id="banner_photoText6" class="banner_texts">
<div class="banner_text_line textElement61_opportune" data-initial-left="500" data-initial-top="60" data-final-left="500" data-final-top="60" data-duration="0.5" data-fade-start="0" data-delay="0">Fully Responsive<br /> slider</div>
<div class="banner_text_line textElement62_opportune" data-initial-left="500" data-initial-top="135" data-final-left="500" data-final-top="135" data-duration="0.5" data-fade-start="0" data-delay="0.3">many optional parameters<br /> for each image</div>
</div>

</div>

JS Options

Attribute	Default Value	Description
General settings
skin	'opportune'	Possible values: - opportune - majestic - generous
responsive	true	Possible values: true - the banner will responsive false - the banner will not be responsive
responsiveRelativeToBrowser	true	Possible values: true - the banner will be responisve relatively to browser dimensions false - the banner will be responisve relatively to parent div
width	918	banner width. If responsive=false this is the exact banner width. If responsive=true this is also used to determine resize proportions
height	382	banner height. If responsive=false this is the exact banner height. If responsive=true this is also used to determine resize proportions
width100Proc	false	Possible values: true - the banner width will be 100% false - the banner width will be what you've set for 'width' parameter
height100Proc	false	Possible values: true - the banner height will be 100% false - the banner height will be what you've set for 'height' parameter
fadeSlides	true	Possible values: true - the transition between the slides will be 'Fade' false - the transition between the slides will be 'Slide'
autoPlay	16	You can define the time (in seconds) until the next slide will play. If you set it 0 the banner will not autoplay
loop	true	Possible values: true - the banner will loop when reaches the end false - the banner will stop when reaches the end
target	'_blank'	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
enableTouchScreen	true	Possible values: true - mobile touch screen support enabled false - mobile touch screen support disabled
pauseOnMouseOver	true	Possible values: true - enables autoPlay pause on mouse over false - disables autoPlay pause on mouse over
absUrl		the url to the skins folder.

Zoom In/Out Effect Settings
horizontalPosition	'center'	Using this parameter the script will determine both the photo initial horizontal pozition and zoom effect direction Possible values: - left - center - right
verticalPosition	'center'	Using this parameter the script will determine both the photo initial vertical pozition and zoom effect direction Possible values: - top - center - bottom
initialZoom	1	initial photo zoom value. We recommend values between 0.5 - 1
finalZoom	0.8	final photo zoom value. We recommend values between 0.5 - 1
duration	20	the Zoom In/Out effect duration in seconds
durationIEfix	30	this value will be added to the 'duration' value for IE browsers if width100Proc=true. This is done because IE (prior to IE10) doesn't support css3 transitions and IE rendering engine is very poor. For IE browsers (prior to IE10), if we have full width or full screen banners we need to make the move slower.

Thumbs Settings - available only for majestic & opportune skins
numberOfThumbsPerScreen	0	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
thumbsOnMarginTop	0	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
thumbsWrapperMarginTop	0	the vertical pozition of the thumbs area

Circle Timer Settings
showCircleTimer	true	Possible values: true - shows the circle timer false - hides the circle timer
circleRadius	10	circle radius
circleLineWidth	4	circle line width
circleColor	"#FF0000"	circle color, in hexa
circleAlpha	100	circle alpha, in percents. Posible values 0-100
behindCircleColor	"#000000"	behind circle color, in hexa
behindCircleAlpha	50	behind circle alpha, in percents. Posible values 0-100

Controllers Settings
showAllControllers	true	Possible values: true - all controllers will appear (next, previous, bottom navigation) false - all controllers will not appear (next, previous, bottom navigation)
showNavArrows	true	Possible values: true - next, previous buttons will appear false - next, previous buttons will not appear
showOnInitNavArrows	true	Possible values: true - next, previous buttons will appear on first banner init false - next, previous buttons will not appear on first banner init
autoHideNavArrows	true	Possible values: true - next, previous buttons will hide when mouse out false - next, previous buttons will not hide when mouse out
showBottomNav	true	Possible values: true - bottom navigation buttons will appear false -bottom navigation buttons will not appear
showOnInitBottomNav	true	Possible values: true - bottom navigation buttons will appear on first banner init false - bottom navigations buttons will not appear on first banner init
autoHideBottomNav	true	Possible values: true -bottom navigations buttons will hide when mouse out false - bottom navigations buttons will not hide when mouse out
showPreviewThumbs	true	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

Example of usage:

jQuery('#banner').banner({
skin: 'opportune',
responsive:true,
width: 940,
height: 364,
circleRadius:8,
circleLineWidth:4,
circleColor: "#ffffff",
circleAlpha: 50,
behindCircleColor: "#000000",
behindCircleAlpha: 20,
thumbsWrapperMarginTop:30
});

Banner Content Definition

Inside the main div (ex: <div id="banner">) you'll add a list:
<ul class="banner_list">
Inside this list you'll add each screen content you want to be present in your banner. The code is:
<li>html content here</li>

Example of usage:

<ul class="banner_list">
<li>html content1 here</li>
<li>html content2 here</li>
<li>html content3 here</li>
</ul>

</div>

The <li> element can have optional paramenters. This parameters are used to change the default/general settings for each slide.

Optional parameters:

Parameter	Ex. of usage	Description
data-horizontalPosition	<li data-horizontalPosition="left">html content here</li>	Using this parameter the script will determine both the photo initial horizontal pozition and zoom effect direction Possible values: - left - center - right
data-verticalPosition	<li data-verticalPosition="top">html content here</li>	Using this parameter the script will determine both the photo initial vertical pozition and zoom effect direction Possible values: - top - center - bottom
data-initialZoom="1"	<li data-initialZoom="1">html content here</li>	initial photo zoom value. We recommend values between 0.5 - 1
data-finalZoom="0.8"	<li data-finalZoom="0.8">html content here</li>	final photo zoom value. We recommend values between 0.5 - 1
data-duration	<li data-duration="10">html content here</li>	the Zoom In/Out effect duration in seconds
data-text-id	<li data-text-id="#text_id_animation">html content here</li>	Used to define the div id which will hold the animated text appearing over the content
data-video	<li data-video="true">html content here</li>	This parameter has to appear if you have video content beneath main photo
data-bottom-thumb	<li data-text-id="#text_id_animation" data-bottom-thumb="images/imposing/thumbs/thumb1.jpg">html content here</li>	A preview image will appear on hovering the corresponding bottom button
data-link	<li data-text-id="#text_id_animation"data-link="http://codecanyon.net/user/LambertGroup/portfolio">html content here</li>	You can specify a link associated to the primary photo
data-target	<li data-text-id="#text_id_animation"data-link="http://codecanyon.net/user/LambertGroup/portfolio"data-target="_self">html content here</li>	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 use target from JS options

Text Animation

For each image you can define animated text. All texts associated with a photo will reside inside a div. The div id will be put as optional parameter "data-text-id"

<li data-text-id="#text_id_animation">html content here</li>

The div containing the text will look like this. What you see below with red are mandatory classes:

For each line of text you can create a separate css class (Ex: particular_customizing1) to customize the text line. Also, each text line has the following optional parameters to control the text animation

Parameter	Description
data-initial-left	the text left initial postion (in pixels)
data-initial-top	the text top initial postion (in pixels)
data-final-left	the text left final postion (in pixels)
data-final-top	the text top final postion (in pixels)
data-duration	the animation duration (in seconds)
data-fade-start	initial fade value. Values from 0 to 100
data-delay	delay time (in seconds)

How To Disable Zoom In/Out Effect

To disable Zoom In/Out Effect just set JS parameters initialZoom and finalZoom to 1.

Example 1 (for the entire slider):
jQuery('#banner').banner({
skin: 'opportune',
width: 940,
height: 364,
initialZoom:1,
initialZoom:1
});

Example 2 (for the a particular slide):
<li data-initialZoom="0.73" data-finalZoom="1">html content1 here</li>

CSS Advices For Text Responsive Behavior

Always set the font size and line-height for a div just once. Don't set the the font size and line-height for an inner link or other inner element.

Correct way:

.textElement54_opportune {
font: 15px 'Droid Sans', Verdana, Helvetica, sans-serif;
line-height:21px;
text-transform:uppercase;
color:#ffffff;
}

.textElement54_opportune a {
color:#ffffff;
}

.textElement54_opportune a:hover {
color:#FF0000;
}

Wrong way:

.textElement54_opportune {
font: 15px 'Droid Sans', Verdana, Helvetica, sans-serif;
line-height:21px;
text-transform:uppercase;
color:#ffffff;
}

.textElement54_opportune a {
font: 16px Arial;
line-height:15px;
color:#ffffff;
}

.textElement54_opportune a:hover {
font: 18px Arial;
line-height:19px;
color:#FF0000;
}