ALL IN ONE - PLAYLIST BANNER
Thank you for purchasing our product!
The product uses allinone_bannerWithPlaylist.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_bannerWithPlaylist.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_bannerWithPlaylist.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 "Cool" skin open cool.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: pureGallery.html) to assure you include the skin correctly.
<!-- must have -->
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link href="allinone_bannerWithPlaylist.css" 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/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="js/allinone_bannerWithPlaylist.js" type="text/javascript"></script>
<!-- must have -->
<script>
jQuery(function() {
jQuery('#allinone_bannerWithPlaylist_elegant').allinone_bannerWithPlaylist({
skin: 'elegant',
width: 960,
height: 381
});
});
</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: pureGallery.html) to assure you include the skin correctly.
<div id="allinone_bannerWithPlaylist_elegant" style="display:none;">
<!-- IMAGES -->
<ul class="allinone_bannerWithPlaylist_list">
<li data-bottom-thumb="images/elegant/thumbs/01_elegantPlaylist.jpg" data-text-id="#allinone_bannerWithPlaylist_photoText1" data-title="Lorem Ipsum Dolor1" data-desc="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque hendrerit" data-link="http://codecanyon.net/user/LambertGroup" data-target="_blank"><img src="images/elegant/01_elegantPlaylist.jpg" alt="" /></li>
<li data-bottom-thumb="images/elegant/thumbs/02_elegantPlaylist.jpg" data-text-id="#allinone_bannerWithPlaylist_photoText2" data-title="Fusce Suscipit Risus2" data-desc="Phasellus vitae velit eu turpis consequat hendrerit. Curabitur vitae sapien libero, amet ornare lectus."><img src="images/elegant/02_elegantPlaylist.jpg" alt="" /></li>
<li data-bottom-thumb="images/elegant/thumbs/03_elegantPlaylist.jpg" data-text-id="#allinone_bannerWithPlaylist_photoText3" data-title="Class Aptent Taciti" data-desc="Maecenas interdum interdum enim id laoreet. Curabitur semper fermentum leo pretium eleifend."><img src="images/elegant/03_elegantPlaylist.jpg" alt="" />
<li data-bottom-thumb="images/elegant/thumbs/04_elegantPlaylist.jpg" data-text-id="#allinone_bannerWithPlaylist_photoText4" data-title="Maecenas Lacus Ante" data-desc="Donec hendrerit magna sit amet eros lobortis non egestas diam scelerisque. Praesent molestie."><img src="images/elegant/04_elegantPlaylist.jpg" alt="" />
<li data-bottom-thumb="images/elegant/thumbs/05_elegantPlaylist.jpg" data-text-id="#allinone_bannerWithPlaylist_photoText5" data-title="Lorem Ipsum Dolor" data-desc="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque hendrerit"><img src="images/elegant/05_elegantPlaylist.jpg" alt="" />
<li data-bottom-thumb="images/elegant/thumbs/06_elegantPlaylist.jpg" data-text-id="#allinone_bannerWithPlaylist_photoText6" data-title="Suscipit Risus" data-desc="Phasellus vitae velit eu turpis consequat hendrerit. Curabitur vitae sapien libero, amet ornare lectus."><img src="images/elegant/06_elegantPlaylist.jpg" alt="" />
</ul>
<!-- TEXTS -->
<div id="allinone_bannerWithPlaylist_photoText1" class="allinone_bannerWithPlaylist_texts">
<div class="allinone_bannerWithPlaylist_text_line textElement11_elegant" data-initial-left="0" data-initial-top="100" data-final-left="0" data-final-top="294" data-duration="0.5" data-fade-start="0" data-delay="0"><span style="text-transform:uppercase; font-weight:bold; padding-left:5px;">Up to 5 types of sliders</span><br /><span style="padding-left:5px;">Each with multiple SKINS</span></div>
</div>
<div id="allinone_bannerWithPlaylist_photoText2" class="allinone_bannerWithPlaylist_texts">
<div class="allinone_bannerWithPlaylist_text_line textElement21_elegant" data-initial-left="80" data-initial-top="30" data-final-left="30" data-final-top="30" data-duration="0.5" data-fade-start="0" data-delay="0">16 transition effects<br /> for images</div>
<div class="allinone_bannerWithPlaylist_text_line textElement22_elegant" data-initial-left="280" data-initial-top="100" data-final-left="30" data-final-top="100" 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_bannerWithPlaylist_photoText3" class="allinone_bannerWithPlaylist_texts">
<div class="allinone_bannerWithPlaylist_text_line textElement31_elegant" data-initial-left="0" data-initial-top="50" data-final-left="40" data-final-top="35" data-duration="0.5" data-fade-start="0" data-delay="0">Animated text from any direction</div>
<div class="allinone_bannerWithPlaylist_text_line textElement32_elegant" data-initial-left="0" data-initial-top="90" data-final-left="40" data-final-top="70" data-duration="0.5" data-fade-start="0" data-delay="0.3">top, bottom, left and right</div>
<div class="allinone_bannerWithPlaylist_text_line textElement33_elegant" data-initial-left="0" data-initial-top="200" data-final-left="40" data-final-top="105" data-duration="1" data-fade-start="0" data-delay="0.5">Any color, CSS and HTML formated</div>
</div>
<div id="allinone_bannerWithPlaylist_photoText4" class="allinone_bannerWithPlaylist_texts">
<div class="allinone_bannerWithPlaylist_text_line textElement41_elegant" data-initial-left="0" data-initial-top="100" data-final-left="0" data-final-top="294" data-duration="0.5" data-fade-start="0" data-delay="0"><span style="padding-left:5px;">Lorem <a href="http://codecanyon.net/user/LambertGroup" target="_blank">Ipsum</a> Dolor Sit Amet</span><br /><span style="padding-left:5px;">Consectetur Adiscipit</span></div>
</div>
<div id="allinone_bannerWithPlaylist_photoText5" class="allinone_bannerWithPlaylist_texts">
<div class="allinone_bannerWithPlaylist_text_line textElement51_elegant" data-initial-left="30" data-initial-top="0" data-final-left="30" data-final-top="270" data-duration="0.5" data-fade-start="0" data-delay="0">Line One is here</div>
<div class="allinone_bannerWithPlaylist_text_line textElement52_elegant" data-initial-left="30" data-initial-top="384" data-final-left="30" data-final-top="250" data-duration="0.5" data-fade-start="0" data-delay="0.3">Line Two over there</div>
</div>
</div>
| Attribute | Default Value | Description |
| General settings | ||
| skin | 'pureGallery' | Possible values: - pureGallery - elegant - easy |
| 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 |
| 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 conunting 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:
|
| 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 '_slef'- the link associated to the primary photo will open in the same window |
| absUrl | the url to the skins folder. | |
| 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 3 |
| borderWidth | 15 | border width |
| borderColor | '#e9e9e9' | border color (hexa) |
| playlistWidth | 300 | playlist width |
| 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 |
| showThumbs | true | Possible values: true - thumbs will appear in playlist false - thumbs will not appear not appear in playlist |
| origThumbImgW | 214 | playlist thumbnail width (for skins that have a thumbnail) |
| origThumbImgH | 128 | playlist thumbnail height (for skins that have a thumbnail) |
| 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_bannerWithPlaylist_pureGallery').allinone_bannerWithPlaylist({
skin: 'pureGallery',
width: 960,
height: 384,
borderWidth: 0,
playlistWidth: 214
});
Inside
the main div (ex: <div id="allinone_thumbnailsBanner_pureGallery">) you'll add a list:
<ul class="allinone_bannerWithPlaylist_pureGallery">
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_bannerWithPlaylist_pureGallery">
<ul class="allinone_bannerWithPlaylist_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>
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:
|
| data-title | <li data-title="Playlist Title"><img src="your_image.jpg" alt="your image alternative text"/></li> | Playlist title information |
| data-desc | <li data-desc="Playlist description"><img src="your_image.jpg" alt="your image alternative text" data-title="Playlist Title" /></li> | Playlist description information |
| 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="http://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: *** If all your links will behave the same, you can ignore this parameter and use target from JS options |
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_bannerWithPlaylist_texts">
<div class="allinone_bannerWithPlaylist_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_bannerWithPlaylist_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) |
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">