ALL IN ONE - CAROUSEL
Thank you for purchasing our product!
The product uses allinone_carousel.css file which contains the skin and texts classes
The images used by the skins are located in this folder and distributed in subfolders with the skin name.
All the .js files are located in this folder. The product uses jquery. The product is generated by allinone_carousel.js
We put all the images in this folder. If needed, you can use a different one.
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_carousel.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 "charming" skin open charming.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: sweet.html) to assure you include the skin correctly.
<!-- must have -->
<link href="allinone_carousel.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js" type="text/javascript"></script>
<script src="js/allinone_carousel.js" type="text/javascript"></script>
<!-- must have -->
<script>
jQuery(function() {
jQuery('#allinone_carousel_charming').allinone_carousel({
skin: 'charming',
width: 990,
height: 454,
autoPlay: 3,
resizeImages:true,
autoHideBottomNav:false,
showElementTitle:false,
verticalAdjustment:50,
showPreviewThumbs:false,
numberOfVisibleItems:5,
nextPrevMarginTop:23,
playMovieMarginTop:0
});
});
</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: sweet.html) to assure you include the skin correctly.
<div id="allinone_carousel_charming">
<div class="myloader"></div>
<!-- CONTENT -->
<ul class="allinone_carousel_list">
<li data-video="true"><img src="images/charming/01_charming.jpg" alt="" /><iframe width="452" height="302" src="http://www.youtube.com/embed/ovOgvGH0HTk" frameborder="0" allowfullscreen></iframe></li>
<li data-link="http://codecanyon.net/user/LambertGroup" data-target="_blank"><img src="images/charming/02_charming.jpg" alt="" /></li>
<li><img src="images/charming/03_charming.jpg" alt="" /></li>
<li><img src="images/charming/04_charming.jpg" alt="" /></li>
<li data-video="true"><img src="images/charming/05_charming.jpg" alt="" /><iframe width="452" height="302" src="http://www.youtube.com/embed/ovOgvGH0HTk" frameborder="0" allowfullscreen></iframe></li>
<li><img src="images/charming/06_charming.jpg" alt="" /></li>
<li><img src="images/charming/07_charming.jpg" alt="" /></li>
</ul>
</div>
| Attribute | Default Value | Description |
| General settings | ||
| skin | 'sweet' | Possible values: - sweet - powerful - charming |
| 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 | 918 | banner width |
| height | 382 | banner height |
| autoPlay | 3 | You can define the time (in seconds) until the next photo will play. If you set it 0 the banner will not autoplay |
| numberOfVisibleItems | 5 | The number of visible items. It has to be an odd number: 3,5,7,9,11 etc |
| elementsHorizontalSpacing | 110 | The horizontal distance between visible items |
| elementsVerticalSpacing | 20 | The value with which the elements are becoming smaller |
| verticalAdjustment | 0 | This value will rise the whole carousel up |
| animationTime | 0.5 | The speed with which the elements are moving (in seconds) |
| easing | 'easeOutQuad' | The animation easing. Possible values: easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInQuint easeOutQuint easeInOutQuint easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce |
| resizeImages | true | If you are using images (or front image) inside the carousel you can set it to auto resize as it moves |
| showElementTitle | true | Possible values: true - the photo title/description will apear false - the photo title/description will apear |
| enableTouchScreen | true | Possible values: true - mobile touch screen support enabled false - mobile touch screen support disabled |
| 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 |
| absUrl | the url to the skins folder. | |
| 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 |
| nextPrevMarginTop | 0 | margin-top for next/previous buttons |
| playMovieMarginTop | 0 | margin-top for play button |
| bottomNavMarginBottom | 0 | margin-bottom for bottom navigation |
| 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 |
| circleLeftPositionCorrection | 3 | this value will be added to the left position of the circle timer |
| circleTopPositionCorrection | 3 | this value will be added to the top position of the circle timer |
Example of usage:
jQuery('#allinone_carousel_charming').allinone_carousel({
skin: 'charming',
width: 990,
height: 454,
autoPlay: 3,
resizeImages:true,
autoHideBottomNav:false,
showElementTitle:false,
verticalAdjustment:50,
showPreviewThumbs:false,
numberOfVisibleItems:5,
nextPrevMarginTop:23,
playMovieMarginTop:0
});
Inside
the main div (ex: <div id="allinone_carousel_sweet">) you'll add a list:
<ul class="allinone_carousel_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:
<div id="allinone_carousel_sweet">
<ul class="allinone_carousel_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.
Optional parameters:
| Parameter | Ex. of usage | Description |
| data-title | <li data-title="Content Title">html content here</li> | The current content title |
| 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-title="Content Title" 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-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-target="_self">html content here</li> |
Possible values: *** If all your links will behave the same, you can ignore this parameter and use target from JS options |