PARALLAX SLIDER - ULTRA
Thank you for purchasing our product!
The product uses parallax_ultra.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 parallax_ultra.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, parallax_ultra.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 "bullets" skin open bullets.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: bullets.html) to assure you include the skin correctly.
<!-- must have -->
<link href="parallax_ultra.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Rokkitt' 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/parallax_ultra.js" type="text/javascript"></script>
<!-- must have -->
<script>
jQuery(function() {
jQuery('#parallax_ultra_thumbs').parallax_ultra({
skin: 'bullets',
width: 960,
height: 416,
myloaderTime:6,
autoPlay:14,
scrollSlideDuration:1.5,
scrollSlideEasing:'swing',
defaultExitOFF:true,
responsive:true,
autoHideBottomNav:false,
thumbsOnMarginTop:18,
showPreviewThumbs:true,
autoHideNavArrows:true,
bgArr:['images/bullets/backgrounds/purple.jpg','images/bullets/backgrounds/littleflower.png','images/bullets/backgrounds/flowers.png'],
bgIEWidth:[960,480,416],
bgStep:[0,480,-416],
bgDuration:[0,1.5,1],
bgEasing:['swing','swing','swing'],
thumbsWrapperMarginBottom: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: bullets.html) to assure you include the skin correctly.
<div id="parallax_ultra_thumbs">
<div class="myloader"></div>
<!-- CONTENT -->
<ul class="parallax_ultra_list">
<li data-text-id="#parallax_ultra_photoText1" data-bottom-thumb="images/bullets/thumbs/01_bullets.jpg"></li>
<li data-text-id="#parallax_ultra_photoText2" data-link="http://codecanyon.net/user/LambertGroup" data-bottom-thumb="images/bullets/thumbs/02_bullets.jpg"></li>
<li data-text-id="#parallax_ultra_photoText3" data-bottom-thumb="images/bullets/thumbs/03_bullets.jpg">/li>
</ul>
<!-- TEXTS -->
<div id="parallax_ultra_photoText1" class="parallax_ultra_texts">
<div class="parallax_ultra_text_line" data-initial-left="145" data-initial-top="65" data-final-left="145" data-final-top="65" data-duration="0.5" data-fade-start="1" data-preanimate="true"><img src="images/bullets/bulletsFixedBorder.png" width="670" height="266" alt="01" /></div>
<div class="parallax_ultra_text_line" data-initial-left="152" data-initial-top="72" data-final-left="152" data-final-top="72" data-duration="0.5" data-fade-start="1" data-preanimate="true"><img src="images/bullets/01_bullets.jpg" width="656" height="252" alt="01" /></div>
<div class="parallax_ultra_text_line" data-initial-left="152" data-initial-top="331" data-final-left="152" data-final-top="331" data-duration="0.5" data-fade-start="1" data-preanimate="true"><img src="images/bullets/shadowsBulletsFixed.png" width="656" height="27" alt="01" /></div>
<div class="parallax_ultra_text_line textElement21_bullets" data-initial-left="135" data-initial-top="120" data-final-left="535" data-final-top="120" data-duration="1.0" data-fade-start="0" data-delay="0.5">Multiple Layered Backgrounds</div>
<div class="parallax_ultra_text_line textElement22_bullets" data-initial-left="135" data-initial-top="150" data-final-left="535" data-final-top="150" data-duration="1.0" data-fade-start="0" data-delay="0.8">which always <br />allows you <br />to create awesome<br /> sliders</div>
</div>
<div id="parallax_ultra_photoText2" class="parallax_ultra_texts">
<div class="parallax_ultra_text_line" data-initial-left="145" data-initial-top="65" data-final-left="145" data-final-top="65" data-duration="0.5" data-fade-start="1" data-preanimate="true"><img src="images/bullets/bulletsFixedBorder.png" width="670" height="266" alt="01" /></div>
<div class="parallax_ultra_text_line" data-initial-left="152" data-initial-top="72" data-final-left="152" data-final-top="72" data-duration="0.5" data-fade-start="1" data-preanimate="true"><img src="images/bullets/02_bullets.jpg" width="656" height="252" alt="01" /></div>
<div class="parallax_ultra_text_line" data-initial-left="152" data-initial-top="331" data-final-left="152" data-final-top="331" data-duration="0.5" data-fade-start="1" data-preanimate="true"><img src="images/bullets/shadowsBulletsFixed.png" width="656" height="27" alt="01" /></div>
</div>
<div id="parallax_ultra_photoText3" class="parallax_ultra_texts">
<div class="parallax_ultra_text_line" data-initial-left="145" data-initial-top="65" data-final-left="145" data-final-top="65" data-duration="0.5" data-fade-start="1" data-preanimate="true"><img src="images/bullets/bulletsFixedBorder.png" width="670" height="266" alt="01" /></div>
<div class="parallax_ultra_text_line" data-initial-left="152" data-initial-top="72" data-final-left="152" data-final-top="72" data-duration="0.5" data-fade-start="1" data-preanimate="true"><img src="images/bullets/03_bullets.jpg" width="656" height="252" alt="01" /></div>
<div class="parallax_ultra_text_line" data-initial-left="152" data-initial-top="331" data-final-left="152" data-final-top="331" data-duration="0.5" data-fade-start="1" data-preanimate="true"><img src="images/bullets/shadowsBulletsFixed.png" width="656" height="27" alt="01" /></div>
</div>
<!-- -->
</div>
| Attribute | Default Value | Description |
| General settings | ||
| skin | 'bullets' | Possible values: - bullets - thumbs |
| 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 |
| width100Proc | false | Possible values: true - the banner width will be 100% false - the banner width will be what you've set for 'width' parameter |
| autoPlay | 7 | You can define the time (in seconds) until the next content 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: *** If needed, for each element you can set particular target, usind 'data-target' parameter. Please refer to Banner Content Definition section |
| absUrl | The url to the skins folder. | |
| scrollSlideDuration | 0.8 | Time to make the transition/animation from one slide to another |
| scrollSlideEasing | 'easeOutQuad' | The animation (from one slide to another) easing. Possible values: linear swing 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 |
| defaultEasing | 'swing' | The defaut easing for layer animation. By layer, we understand a text or an image which comes over the main image. Possible values: linear swing 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 *** If needed, for each element you can set particular easing, usind 'data-easing' parameter. Please refer to Layer/Text Animation section |
| NOTE: if you want to see the exit move, we recommend these values: scrollSlideDuration:1.8, scrollSlideEasing:'easeInQuint', |
||
| myloaderTime | 4 | the delay time (in seconds) to postpone the slider start. In this time, a rotating cicle will appear in the middle of the slider to signal that the slider is in loading status NOTE: to gain time when you are testing your slider, because the slider is already in cache, set myloaderTime:0. |
| pauseOnMouseOver | true | Possible values: true - enables autoPlay pause on mouse over false - disables autoPlay pause on mouse over |
| enableTouchScreen | true | Possible values: true - mobile touch screen support enabled false - mobile touch screen support disabled |
| Default Values For Layers Exit Move | ||
| defaultExitLeft | 0 | the default left position, for layer exit (in pixels) *** If needed, for each element you can set particular exit left, usind 'data-exit-left' parameter. Please refer to Layer/Text Animation section |
| defaultExitTop | 0 | the default top position, for layer exit (in pixels) *** If needed, for each element you can set particular exit top, usind 'data-exit-top' parameter. Please refer to Layer/Text Animation section |
| defaultExitDuration | 0 | the default duration, for layer exit (in seconds) *** If needed, for each element you can set particular exit duratio, usind 'data-exit-duration' parameter. Please refer to Layer/Text Animation section |
| defaultExitDelay | 0 | the default time delay, for layer exit (in seconds) *** If needed, for each element you can set particular exit delay, usind 'data-exit-delay' parameter. Please refer to Layer/Text Animation section |
| defaultExitEasing | 'swing' | the default easing, for layer exit (in pixels) *** If needed, for each element you can set particular exit easing, usind 'data-exit-easing' parameter. Please refer to Layer/Text Animation section |
| defaultExitOFF | false | Possible values: *** If needed, for each element you can set particular exit OFF, usind 'data-exit-off' parameter. Please refer to Layer/Text Animation section |
| 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 |
| 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 |
| thumbsWrapperMarginBottom | 0 | the vertical pozition of the bottom navigation area |
| thumbsOnMarginTop | 10 | 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 |
| Background Parameters | ||
| bgArr | [ ] | the slide backgrounds/patterns array, separated by ';' |
| bgIEWidth | [ ] | the width array for slider backgrounds/patterns, separated by ';' These values are used for IE7 & IE8, because IE7 & IE8 don't have CSS3 support.
|
| bgStep | [ ] | the step array for slider backgrounds/patterns, separated by ';' These values are used to define the backgrounds/patterns speed. IMPORTANT!!! if you don't want a background to move, set the corresponding value to 0. |
| bgDuration | [ ] | the animation duration array for slider backgrounds, separated by ';' These values are used to define the backgrounds/patterns speed. IMPORTANT!!! if you don't want a background to move, set the corresponding value to 0. |
| bgEasing | [ ] | the animation easing array for slider backgrounds/patterns, separated by ';' |
| 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('#parallax_ultra_thumbs').parallax_ultra({
skin: 'bullets',
width: 960,
height: 416,
myloaderTime:6,
autoPlay:14,
scrollSlideDuration:1.5,
scrollSlideEasing:'swing',
defaultExitOFF:true,
responsive:true,
autoHideBottomNav:false,
thumbsOnMarginTop:18,
showPreviewThumbs:true,
autoHideNavArrows:true,
bgArr:['images/bullets/backgrounds/purple.jpg','images/bullets/backgrounds/littleflower.png','images/bullets/backgrounds/flowers.png'],
bgIEWidth:[960,480,416],
bgStep:[0,480,-416],
bgDuration:[0,1.5,1],
bgEasing:['swing','swing','swing'],
thumbsWrapperMarginBottom:30
});
Inside
the main div (ex: <div id="parallax_ultra_bullets">) you'll add a list:
<ul class="parallax_ultra_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="parallax_ultra_bullets">
<div class="myloader"></div>
<ul class="parallax_ultra_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-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/ultra/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: *** If this parameter is not added, the value of JS parameter 'target', will be used. Please refer to JS options section |
For each slide you can define animated layers/texts. All layers/texts associated with a slide 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:
<div id="text_id_animation" class="parallax_ultra_texts">
<div class="parallax_ultra_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="parallax_ultra_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 |
| Layer/Text Enter Parameters | |
| 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) |
| data-easing | The easing for layer animation. Possible values: linear swing 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 *** If this parameter is not added, the value of JS parameter 'defaultEasing, will be used. Please refer to JS options section. |
| Layer/Text Exit Parameters | |
| data-exit-left | the left position, for layer exit (in pixels) *** If this parameter is not added, the value of JS parameter 'defaultExitLeft', will be used. Please refer to JS options section |
| data-exit-top | the top position, for layer exit (in pixels) *** If this parameter is not added, the value of JS parameter 'defaultExitTop', will be used. Please refer to JS options section |
| data-exit-duration | the duration, for layer exit (in seconds) *** If this parameter is not added, the value of JS parameter 'defaultExitDuration', will be used. Please refer to JS options section |
| data-exit-delay | the time delay, for layer exit (in seconds) *** If this parameter is not added, the value of JS parameter 'defaultExitDelay', will be used. Please refer to JS options section |
| data-exit-easing | The easing for layer exit animation. Possible values: linear swing 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 *** If this parameter is not added, the value of JS parameter 'defaultExitEasing, will be used. Please refer to JS options section |
| data-exit-off | Possible values: *** If this parameter is not added, the value of JS parameter 'defaultExitOFF', will be used. Please refer to JS options section |