ALL IN ONE - BANNER ROTATOR

Thank you for purchasing our product!

- Files Structure
  - css file
  - skins folder
  - js folder
  - images folder
  - html files
- HTML/JS code for implementation
- JS Options
- Banner Images Definition
- Text Animation

Files Structure

- css file
- skins folder
- js folder
- images folder
- html files

css file

The product uses allinone_bannerRotator.css file which contains the skin and text_classes.css which contains some of 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 allinone_bannerRotator.js

images folder

We've 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 a .html file. In each file you'll find all the necessary code for implementation for each skin.

HTML/JS code for implementation

Step 1: Copy on your server/project the following files and folders: images, js, skins, allinone_bannerRotator.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 you want to use. For example, if you want to use "Classic" skin open classic.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: classic.html) to assure you include the skin correctly.

<!-- must have -->
<link href="allinone_bannerRotator.css" rel="stylesheet" type="text/css">
<link href="text_classes.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="js/jquery.touchSwipe.min.js" type="text/javascript"></script>
<script src="js/allinone_bannerRotator.js" type="text/javascript"></script>
<!-- must have -->

<script>
jQuery(function() {

jQuery('#allinone_bannerRotator_classic').allinone_bannerRotator({
skin: 'classic',
width: 960,
height: 384,
thumbsWrapperMarginBottom:5
});
});
</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: classic.html) to assure you include the skin correctly.

<div id="allinone_bannerRotator_classic" style="display:none;">
<!-- IMAGES -->
<ul class="allinone_bannerRotator_list">
<li data-bottom-thumb="images/classic/thumbs/01_classic.jpg" data-text-id="#allinone_bannerRotator_photoText1"><img src="images/classic/01_classic.jpg" alt="" /></li>
<li data-bottom-thumb="images/classic/thumbs/02_classic.jpg" data-text-id="#allinone_bannerRotator_photoText2" data-link="https://codecanyon.net/user/LambertGroup" data-target="_blank"><img src="images/classic/02_classic.jpg" alt="" /></li>
<li data-bottom-thumb="images/classic/thumbs/03_classic.jpg" data-text-id="#allinone_bannerRotator_photoText3"><img src="images/classic/03_classic.jpg" alt="" /></li>
<li data-bottom-thumb="images/classic/thumbs/04_classic.jpg" data-text-id="#allinone_bannerRotator_photoText4" data-link="https://codecanyon.net/user/LambertGroup" data-target="_self"><img src="images/classic/04_classic.jpg" alt="" /></li>
<li data-bottom-thumb="images/classic/thumbs/05_classic.jpg" data-text-id="#allinone_bannerRotator_photoText5"><img src="images/classic/05_classic.jpg" alt="" /></li>
</ul>
<!-- TEXTS -->
<div id="allinone_bannerRotator_photoText1" class="allinone_bannerRotator_texts">
<div class="allinone_bannerRotator_text_line textElement11_classic" 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">Up to 5 types of banners</div>
<div class="allinone_bannerRotator_text_line textElement12_classic" 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">Each with <a href="https://codecanyon.net/user/LambertGroup" target="_blank">multiple</a> SKINS</div>
</div>
<div id="allinone_bannerRotator_photoText2" class="allinone_bannerRotator_texts">
<div class="allinone_bannerRotator_text_line textElement21_classic" data-initial-left="450" data-initial-top="60" data-final-left="450" data-final-top="60" data-duration="0.5" data-fade-start="0" data-delay="0">16 transition effects<br /> for images</div>
<div class="allinone_bannerRotator_text_line textElement22_classic" data-initial-left="450" data-initial-top="125" data-final-left="450" data-final-top="125" data-duration="0.5" data-fade-start="0" data-delay="0.3">optional can set the transition<br /> for each image</div>
</div>
<div id="allinone_bannerRotator_photoText3" class="allinone_bannerRotator_texts">
<div class="allinone_bannerRotator_text_line textElement31_classic" 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="allinone_bannerRotator_text_line textElement32_classic" data-initial-left="0" data-initial-top="75" data-final-left="50" data-final-top="75" data-duration="0.5" data-fade-start="0" data-delay="0.3">top, bottom, left and right</div>
<div class="allinone_bannerRotator_text_line textElement33_classic" 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="allinone_bannerRotator_photoText4" class="allinone_bannerRotator_texts">
<div class="allinone_bannerRotator_text_line textElement41_classic" 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">Line One is here</div>
<div class="allinone_bannerRotator_text_line textElement42_classic" 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">Line Two over there</div>
</div>
<div id="allinone_bannerRotator_photoText5" class="allinone_bannerRotator_texts">
<div class="allinone_bannerRotator_text_line textElement51_classic" data-initial-left="400" data-initial-top="350" data-final-left="400" data-final-top="52" data-duration="0.5" data-fade-start="0" data-delay="0"><a href="https://codecanyon.net/user/LambertGroup" target="_blank">Cool Title Right Here</a></div>
<div class="allinone_bannerRotator_text_line textElement52_classic" data-initial-left="400" data-initial-top="110" data-final-left="400" data-final-top="92" data-duration="0.5" data-fade-start="0" data-delay="0.3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis <a href="https://codecanyon.net/user/LambertGroup" target="_blank"> aute irure </a> dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
<div class="allinone_bannerRotator_text_line textElement53_classic" data-initial-left="400" data-initial-top="350" data-final-left="400" data-final-top="262" data-duration="0.5" data-fade-start="0" data-delay="0"><a href="https://codecanyon.net/user/LambertGroup" target="_blank">Click - this is a button</a></div>
</div> <!-- -->
</div>

JS Options

Attribute | Default Value | Description
General settings
skin | 'classic' | Possible values: - classic - universal - attractive
responsive | false | 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 | 960 | banner width
height | 384 | banner height
width100Proc | false | Possible values: true - the banner width will be 100% false - the banner width will be what you've set for 'width' parameter
centerPlugin | false | Possible values: true - the banner will be centered on the page false - the banner will not be centered on the page
randomizeImages | false | Possible values: true - it will navigate the images in a random manner false - it will navigate the images as they are defined
firstImg | 0 | Define which image will be the first one to load. The counting starts from 0
numberOfStripes | 20 | The number of vertical stripes
numberOfRows | 5 | 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.
numberOfColumns | 10 | 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.
defaultEffect | 'random' | You can define a general transition effect for all images. The available options are: fade slideFromLeft slideFromRight slideFromTop slideFromBottom topBottomDroppingStripes topBottomDroppingReverseStripes bottomTopDroppingStripes bottomTopDroppingReverseStripes asynchronousDroppingStripes leftRightFadingStripes leftRightFadingReverseStripes topBottomDiagonalBlocks topBottomDiagonalReverseBlocks randomBlocks alternateSlide random
effectDuration | 0.5 | The effect duration (in seconds)
autoPlay | 4 | You can define the time (in seconds) until the next photo 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 '_self'- the link associated to the primary photo will open in the same window
absUrl |  | the url to the skins folder.
enableTouchScreen | true | Possible values: true - mobile touch screen support enabled false - mobile touch screen support disabled
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
thumbsWrapperMarginBottom | 0 | the vertical pozition of the bottom/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

Example of usage:

jQuery('#allinone_bannerRotator_attractive').allinone_bannerRotator({
skin: 'classic',
width: 960,
height: 384,
thumbsWrapperMarginBottom:5
});

Banner Images Definition

Inside the main div (ex: <div id="allinone_bannerRotator_classic">) you'll add a list:
<ul class="allinone_bannerRotator_list">
Inside this list you'll add each image you want to be present in your slider. The code is:
<li><img src="your_image.jpg" alt="your image alternative text" /></li>

Example of usage:

<div id="allinone_bannerRotator_classic">

<ul class="allinone_bannerRotator_list">
<li><img src="your_image1.jpg" alt="your image1 alternative text" /></li>
<li><img src="your_image2.jpg" alt="your image2 alternative text" /></li>
</ul>

</div>

The <li> element can have optional paramenters.

Optional parameters:

Parameter | Ex. of usage | Description
data-text-id | <li data-text-id="#text_id_animation"><img src="your_image1.jpg" alt="your image1 alternative text" /></li> | Used to define the div id which will hold the animated text appearing over the image
data-transition | <li data-transition="fade"><img src="your_image1.jpg" alt="your image1 alternative text" /></li> | For each image you can define a transition effect. If this parameter is not present a general one defined in in JS options will be used. Check JS Options The available options are: fade slideFromLeft slideFromRight slideFromTop slideFromBottom topBottomDroppingStripe topBottomDroppingReverseStripes bottomTopDroppingStripes bottomTopDroppingReverseStripes asynchronousDroppingStripes leftRightFadingStripes leftRightFadingReverseStripes topBottomDiagonalBlocks topBottomDiagonalReverseBlocks randomBlocks alternateSlide random
data-bottom-thumb | <li data-bottom-thumb="images/imposing/thumbs/thumb1.jpg"><img src="your_image1.jpg" alt="your image1 alternative text" /></li> | A preview image will appear on hovering the corresponding bottom button
data-link | <li data-link="https://codecanyon.net/user/LambertGroup/portfolio"><img src="your_image1.jpg" alt="your image1 alternative text" /></li> | You can specify a link associated to the primary photo
data-target | <li data-target="_self"><img src="your_image1.jpg" alt="your image1 alternative text" /></li> | Possible values: '_blank' - the link associated to the primary photo will open in a new window '_self'- 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"

<img src="your_image.jpg" alt="your image alternative text" data-text-id="#text_id_animation" />

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

<div id="text_id_animation" class="allinone_bannerRotator_texts">
<div class="allinone_bannerRotator_text_line particular_customizing1" 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">Line 1</div>
<div class="allinone_bannerRotator_text_line particular_customizing2" 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">Line 2</div>
</div>

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)