Zoom In/Out Effect SLIDERS FULL COLLECTION

Thank you for purchasing our product!

 

 

Files Structure

css file

The product uses bannerscollection_zoominout.css file which contains the skin classes, text_classes.css file which contains the layers classes and css3animations.css file which contains the css3 animations.

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 bannerscollection_zoominout.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 dimension (fixed dimensions, full width) 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, bannerscollection_zoominout.css, text_classes.css, css3animations.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/type & example you want to use. For example, if you want to use "opportune" skin/type in Full Width dimension open full-width-opportune-skin.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: full-width-opportune-skin.html) to assure you include the skin/type & example correctly. Don't forget to set responsive: false, in case you don't need resposnisve behavior.

<!-- must have -->
<link href="bannerscollection_zoominout.css" rel="stylesheet" type="text/css">
<link href="text_classes.css" rel="stylesheet" type="text/css">
<link href="css3animations.css" rel="stylesheet" type="text/css">

<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>


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

 

<script>
jQuery(function() {
jQuery("#bannerscollection_zoominout_1").bannerscollection_zoominout({
skin:"opportune",
width:1920,
height:600,
width100Proc:true,
height100Proc:false,
responsive:true,
responsiveRelativeToBrowser:true,
setAsBg:false,
autoPlay:10,
loop:true,
fadeSlides:true,
horizontalPosition:"center",
verticalPosition:"center",
initialZoom:1,
finalZoom:0.8,
duration:20,
durationIEfix:30,
zoomEasing:"ease",
target:"_blank",
pauseOnMouseOver:true,
showAllControllers:true,
showNavArrows:true,
showOnInitNavArrows:true,
autoHideNavArrows:true,
showBottomNav:true,
showOnInitBottomNav:true,
autoHideBottomNav:false,
showPreviewThumbs:true,
enableTouchScreen:true,
absUrl:"",
scrollSlideDuration:0.8,
scrollSlideEasing:"swing",
defaultEasing:"swing",
myloaderTime:1,
showCircleTimer:true,
circleRadius:13,
circleLineWidth:2,
circleColor:"#ffffff",
circleAlpha:100,
behindCircleColor:"##ffffff",
behindCircleAlpha:20,
numberOfThumbsPerScreen:0,
thumbsWrapperMarginTop:30,
thumbsOnMarginTop:0,
defaultExitLeft:0,
defaultExitTop:0,
defaultExitFade:1,
defaultExitDuration:0,
defaultExitDelay:0,
defaultExitEasing:"swing",
defaultExitOFF:true
});

});
</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: full-width-opportune-skin.html) to assure you include the skin/type correctly.

<div id="bannerscollection_zoominout_1">
<div class="myloader"></div>

<ul class="bannerscollection_zoominout_list">
<li data-text-id="#bannerscollection_zoominout_photoText79"
data-video="false"
data-bottom-thumb="images/oportuneFullWidth/thumbs/00t_opportune.jpg"
data-autoPlay="18"
data-horizontalPosition="center"
data-verticalPosition="top"
data-initialZoom="1"
data-finalZoom="0.78">
<img src="images/oportuneFullWidth/redGirl.jpg" width="2500" height="782" style="width:2500px; height:782px;" alt="" />
</li>

<li data-text-id="#bannerscollection_zoominout_photoText1"
data-video="false"
data-bottom-thumb="images/oportuneFullWidth/thumbs/01t_opportune.jpg"
data-autoPlay="12"
data-horizontalPosition="left"
data-verticalPosition="center"
data-initialZoom="0.8"
data-finalZoom="1"
data-zoomEasing="ease" ><img src="images/oportuneFullWidth/01_opportune.jpg" width="2500" height="782" style="width:2500px; height:782px;" alt="" /></li>

<li
data-text-id="#bannerscollection_zoominout_photoText2"
data-video="false"
data-bottom-thumb="images/oportuneFullWidth/thumbs/02t_opportune.jpg"
data-link="http://codecanyon.net/item/responsive-zoom-inout-slider-wordpress-plugin/2950062?ref=LambertGroup"
data-target="_blank"
data-autoPlay="20"
data-horizontalPosition="left"
data-verticalPosition="top"
data-initialZoom="0.8"
data-finalZoom="1"
data-zoomEasing="ease" ><img src="images/oportuneFullWidth/02_opportune_dr.jpg" width="2500" height="782" style="width:2500px; height:782px;" alt="" /></li>

<li
data-text-id=""
data-video="true"
data-bottom-thumb="images/oportuneFullWidth/thumbs/03t_opportune.jpg"
data-horizontalPosition="right"
data-verticalPosition="top"
data-initialZoom="0.8"
data-finalZoom="1"
data-zoomEasing="" ><img src="images/oportuneFullWidth/03_opportune.jpg" width="2500" height="782" style="width:2500px; height:782px;" alt="" /><iframe width="100%" height="100%" src="http://www.youtube.com/embed/2muxrT5_a6E" frameborder="0" allowfullscreen></iframe></li>

<li
data-text-id="#bannerscollection_zoominout_photoText5"
data-video="false"
data-bottom-thumb="images/oportuneFullWidth/thumbs/05t_opportune.jpg"
data-horizontalPosition="center"
data-verticalPosition="center"
data-initialZoom="1"
data-finalZoom="0.8"
data-zoomEasing="ease" ><img src="images/oportuneFullWidth/05_opportune.jpg" width="2500" height="782" style="width:2500px; height:782px;" alt="" /></li>

<li
data-text-id="#bannerscollection_zoominout_photoText75"
data-video="false"
data-bottom-thumb="images/oportuneFullWidth/thumbs/04t_opportune.jpg"
data-autoPlay="12"
data-horizontalPosition="left"
data-verticalPosition="top"
data-initialZoom="1"
data-finalZoom="0.8"
data-zoomEasing="" ><img src="images/oportuneFullWidth/04_opportune.jpg" width="2500" height="782" style="width:2500px; height:782px;" alt="" /></li>
</ul>


<!-- TEXTS -->
<div id="bannerscollection_zoominout_photoText79" class="bannerscollection_zoominout_texts">
<div class="bannerscollection_zoominout_text_line transp10"
data-initial-left="0"
data-initial-top="0"
data-final-left="0"
data-final-top="0"
data-duration="3"
data-fade-start="0"
data-delay="0"
data-easing="swing"
data-css3-animation=""
data-intermediate-delay="0">
<div class="lbg_inner_div" style="border-width:0px;border-style:solid;"><img src="skins/empty50.png" width="50" height="50" style="width:50px; height:50px; border:0;" alt="transparency10" /></div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_HugeGrand"
data-initial-left="1144"
data-initial-top="132"
data-final-left="1144"
data-final-top="132"
data-duration="0.5"
data-fade-start="0"
data-delay="1.1"
data-easing="easeOutBack"
data-css3-animation="lightSpeedInLeft"
data-intermediate-delay="2"
data-intermediate-css3-animation="hinge2">
<div class="lbg_inner_div" style="color:#ffffff;border-width:0px;border-style:solid;">6</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_HugeGrand"
data-initial-left="969"
data-initial-top="132"
data-final-left="969"
data-final-top="132"
data-duration="0.5"
data-fade-start="0"
data-delay="0.5"
data-easing="easeOutBack"
data-css3-animation="perspectiveDownRetourn"
data-intermediate-delay="4"
data-intermediate-css3-animation="holeOut">
<div class="lbg_inner_div" style="color:#ffffff;border-width:0px;border-style:solid;">1</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_HugeGrand"
data-initial-left="795"
data-initial-top="132"
data-final-left="795"
data-final-top="132"
data-duration="0.5"
data-fade-start="0"
data-delay="0.2"
data-easing="easeOutBack"
data-css3-animation="perspectiveUpRetourn"
data-intermediate-delay="5"
data-intermediate-css3-animation="holeOut">
<div class="lbg_inner_div" style="color:#ffffff;border-width:0px;border-style:solid;">0</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_HugeGrand"
data-initial-left="621"
data-initial-top="132"
data-final-left="621"
data-final-top="132"
data-duration="0.5"
data-fade-start="0"
data-delay="0.8"
data-easing="easeOutBack"
data-css3-animation="lightSpeedInRight"
data-intermediate-delay="1"
data-intermediate-css3-animation="hinge2">
<div class="lbg_inner_div" style="color:#ffffff;border-width:0px;border-style:solid;">2</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_ExtraLargeGrand"
data-initial-left="552"
data-initial-top="167"
data-final-left="552"
data-final-top="167"
data-duration="0.5"
data-fade-start="0"
data-delay="6.5"
data-easing="easeOutBack"
data-css3-animation="scaleIn"
data-exit-left="552"
data-exit-top="-200"
data-exit-fade="0"
data-exit-duration="0.5"
data-exit-delay="0"
data-exit-easing="swing"
data-exit-off="false"
data-exit-css3-animation="scaleInExit"
data-intermediate-delay="7.6"
data-intermediate-left="552"
data-intermediate-top="203"
data-intermediate-duration="0.8"
data-intermediate-easing="swing">
<div class="lbg_inner_div" style="color:#ffffff;border-width:0px;border-style:solid;">THE MOST WANTED</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_MediumGrand"
data-initial-left="570"
data-initial-top="266"
data-final-left="570"
data-final-top="266"
data-duration="0.5"
data-fade-start="0"
data-delay="8.5"
data-easing="ease"
data-css3-animation="scaleOut"
data-intermediate-delay="1"
data-intermediate-css3-animation="zoomOut">
<div class="lbg_inner_div" style="color:#ffffff;border-width:0px;border-style:solid;">Hardware Accelerated CSS3 Transitions for Layers</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_MediumGrand"
data-initial-left="752"
data-initial-top="266"
data-final-left="752"
data-final-top="266"
data-duration="0.5"
data-fade-start="0"
data-delay="10.5"
data-easing="ease"
data-css3-animation="scaleOut"
data-intermediate-delay="1"
data-intermediate-css3-animation="zoomOut">
<div class="lbg_inner_div" style="color:#ffffff;border-width:0px;border-style:solid;">Improved KenBurns Effect</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_MediumGrand"
data-initial-left="575"
data-initial-top="266"
data-final-left="575"
data-final-top="266"
data-duration="0.5"
data-fade-start="0"
data-delay="12.5"
data-easing="ease"
data-css3-animation="scaleOut"
data-intermediate-delay="1"
data-intermediate-css3-animation="zoomOut">
<div class="lbg_inner_div" style="color:#ffffff;border-width:0px;border-style:solid;">Parametters for Initial, Intermediate &#038; Exit Moves</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_ExtraLargeGrand"
data-initial-left="678"
data-initial-top="318"
data-final-left="678"
data-final-top="318"
data-duration="0.5"
data-fade-start="0"
data-delay="7.5"
data-easing="easeOutBack"
data-css3-animation="scaleIn"
data-exit-left="678"
data-exit-top="800"
data-exit-fade="0"
data-exit-duration="0.5"
data-exit-delay="0"
data-exit-easing="swing"
data-exit-off="false"
data-exit-css3-animation="scaleInExit"
data-intermediate-delay="6.6"
data-intermediate-left="678"
data-intermediate-top="285"
data-intermediate-duration="0.7"
data-intermediate-easing="swing">
<div class="lbg_inner_div" style="color:#ffffff;border-width:0px;border-style:solid;">ZOOM SLIDER</div>
</div>

</div>



<div id="bannerscollection_zoominout_photoText1" class="bannerscollection_zoominout_texts">
<div class="bannerscollection_zoominout_text_line lbg1_MediumGrand"
data-initial-left="1221"
data-initial-top="138"
data-final-left="1221"
data-final-top="138"
data-duration="0.5"
data-fade-start="0"
data-delay="0.6"
data-easing="ease"
data-css3-animation="fadeIn"
data-intermediate-delay="0">
<div class="lbg_inner_div" style="color:#ffffff;background-color:#000000;border-width:0px;border-style:solid; padding:0 5px 2px 5px;">ULTRA-SMOOTH</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_MediumGrand"
data-initial-left="1221"
data-initial-top="156"
data-final-left="1525"
data-final-top="156"
data-duration="0.5"
data-fade-start="0"
data-delay="1.8"
data-easing="swing"
data-css3-animation="coolBarLeftMin"
data-intermediate-delay="0">
<div class="lbg_inner_div" style="color:#ffffff;background-color:#000000;border-width:0px;border-style:solid;"></div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_MediumGrand"
data-initial-left="1221"
data-initial-top="156"
data-final-left="1025"
data-final-top="156"
data-duration="0.5"
data-fade-start="0"
data-delay="1.8"
data-easing="swing"
data-css3-animation="coolBarRightMin"
data-intermediate-delay="0">
<div class="lbg_inner_div" style="background-color:#000000;border-width:0px;border-style:solid;"></div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_ExtraLargeGrand"
data-initial-left="1213"
data-initial-top="168"
data-final-left="1213"
data-final-top="306"
data-duration="1"
data-fade-start="0"
data-delay="6.7"
data-easing="ease"
data-css3-animation="perspectiveDownZero"
data-intermediate-delay="0.4"
data-intermediate-css3-animation="perspectiveDownRetourn">
<div class="lbg_inner_div" style="color:#000000;border-width:0px;border-style:solid;">EFFECT</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_SmallGrand"
data-initial-left="1136"
data-initial-top="501"
data-final-left="1136"
data-final-top="420"
data-duration="0.7"
data-fade-start="0"
data-delay="8"
data-easing="ease"
data-css3-animation=""
data-intermediate-delay="0">
<div class="lbg_inner_div" style="color:#000000;border-width:0px;border-style:solid;">Customizable With Many <a href="http://codecanyon.net/user/LambertGroup?ref=LambertGroup" target="_blank">Parameters</a></div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_ExtraLargeGrand"
data-initial-left="1175"
data-initial-top="30"
data-final-left="1648"
data-final-top="207"
data-duration="0.5"
data-fade-start="0"
data-delay="6.5"
data-easing="swing"
data-css3-animation=""
data-intermediate-delay="0">
<div class="lbg_inner_div" style="color:#ed0a1e;border-width:0px;border-style:solid;">T</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_ExtraLargeGrand"
data-initial-left="1175"
data-initial-top="30"
data-final-left="1578"
data-final-top="207"
data-duration="0.5"
data-fade-start="0"
data-delay="6.2"
data-easing="swing"
data-css3-animation=""
data-intermediate-delay="0">
<div class="lbg_inner_div" style="color:#ed0a1e;border-width:0px;border-style:solid;">U</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_ExtraLargeGrand"
data-initial-left="1175"
data-initial-top="30"
data-final-left="1506"
data-final-top="207"
data-duration="0.5"
data-fade-start="0"
data-delay="5.9"
data-easing="swing"
data-css3-animation=""
data-intermediate-delay="0">
<div class="lbg_inner_div" style="color:#ed0a1e;border-width:0px;border-style:solid;">O</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_ExtraLargeGrand"
data-initial-left="1175"
data-initial-top="30"
data-final-left="1461"
data-final-top="205"
data-duration="0.5"
data-fade-start="0"
data-delay="5.6"
data-easing="swing"
data-css3-animation=""
data-intermediate-delay="0">
<div class="lbg_inner_div" style="color:#ed0a1e;border-width:0px;border-style:solid;">/</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_ExtraLargeGrand"
data-initial-left="1175"
data-initial-top="30"
data-final-left="1379"
data-final-top="207"
data-duration="0.5"
data-fade-start="0"
data-delay="5.3"
data-easing="swing"
data-css3-animation=""
data-intermediate-delay="0">
<div class="lbg_inner_div" style="color:#ed0a1e;border-width:0px;border-style:solid;">N</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_ExtraLargeGrand"
data-initial-left="1175"
data-initial-top="30"
data-final-left="1350"
data-final-top="207"
data-duration="0.5"
data-fade-start="0"
data-delay="5"
data-easing="swing"
data-css3-animation=""
data-intermediate-delay="0">
<div class="lbg_inner_div" style="color:#ed0a1e;border-width:0px;border-style:solid;">I</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_ExtraLargeGrand"
data-initial-left="1175"
data-initial-top="207"
data-final-left="1230"
data-final-top="207"
data-duration="0.5"
data-fade-start="0"
data-delay="3.1"
data-easing="swing"
data-css3-animation="flipYFastLeft3dChangeColor"
data-intermediate-delay="0">
<div class="lbg_inner_div" style="color:#000000;border-width:0px;border-style:solid;">M</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_ExtraLargeGrand"
data-initial-left="1084"
data-initial-top="207"
data-final-left="1159"
data-final-top="207"
data-duration="0.5"
data-fade-start="0"
data-delay="2.9"
data-easing="swing"
data-css3-animation="flipYFastRight3dChangeColor"
data-intermediate-delay="0">
<div class="lbg_inner_div" style="color:#000000;border-width:0px;border-style:solid;">O</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_ExtraLargeGrand"
data-initial-left="997"
data-initial-top="207"
data-final-left="1084"
data-final-top="207"
data-duration="0.5"
data-fade-start="0"
data-delay="2.7"
data-easing="swing"
data-css3-animation="flipYFastLeft3dChangeColor"
data-intermediate-delay="0">
<div class="lbg_inner_div" style="color:#000000;border-width:0px;border-style:solid;">O</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_ExtraLargeGrand"
data-initial-left="1034"
data-initial-top="207"
data-final-left="1025"
data-final-top="207"
data-duration="0.5"
data-fade-start="0"
data-delay="2.5"
data-easing="swing"
data-css3-animation="flipYFastRight3dChangeColor"
data-intermediate-delay="0">
<div class="lbg_inner_div" style="color:#000000;border-width:0px;border-style:solid;">Z</div>
</div>
</div>




<div id="bannerscollection_zoominout_photoText2" class="bannerscollection_zoominout_texts">
<div class="bannerscollection_zoominout_text_line lbg1_ExtraLargeGrand"
data-initial-left="496"
data-initial-top="270"
data-final-left="496"
data-final-top="270"
data-duration="0"
data-fade-start="0"
data-delay="13"
data-easing="swing"
data-css3-animation="typing"
data-intermediate-delay="0">
<div class="lbg_inner_div" style="color:#ff5656;border-width:0px;border-style:solid;"><a href="http://codecanyon.net/user/LambertGroup?ref=LambertGroup" target="_blank">image</a></div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_ExtraLargeGrand"
data-initial-left="496"
data-initial-top="270"
data-final-left="496"
data-final-top="270"
data-duration="0"
data-fade-start="0"
data-delay="8"
data-easing="swing"
data-css3-animation="typing_and_erasing"
data-intermediate-delay="0">
<div class="lbg_inner_div" style="color:#ff5656;border-width:0px;border-style:solid;">imaeg</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_ExtraLargeGrand"
data-initial-left="496"
data-initial-top="270"
data-final-left="496"
data-final-top="270"
data-duration="0"
data-fade-start="0"
data-delay="3"
data-easing="swing"
data-css3-animation="typing_and_erasing"
data-intermediate-delay="0">
<div class="lbg_inner_div" style="color:#ff5656;border-width:0px;border-style:solid;">imgae</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_MediumGrand"
data-initial-left="150"
data-initial-top="230"
data-final-left="150"
data-final-top="230"
data-duration="0.5"
data-fade-start="0"
data-delay="0.3"
data-easing="swing"
data-css3-animation="foolishIn"
data-intermediate-delay="0">
<div class="lbg_inner_div" style="color:#ffffff;border-width:0px;border-style:solid;">You can define optional external link</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_ExtraLargeGrand"
data-initial-left="150"
data-initial-top="270"
data-final-left="150"
data-final-top="270"
data-duration="0.5"
data-fade-start="0"
data-delay="1.5"
data-easing="swing"
data-css3-animation="slideExpandUp"
data-intermediate-delay="0">
<div class="lbg_inner_div" style="color:#ffffff;border-width:0px;border-style:solid;">For each</div>
</div>
</div>



<div id="bannerscollection_zoominout_photoText5" class="bannerscollection_zoominout_texts">
<div class="bannerscollection_zoominout_text_line lbg1_TinyGrand"
data-initial-left="1385"
data-initial-top="380"
data-final-left="1385"
data-final-top="380"
data-duration="1"
data-fade-start="0"
data-delay="3"
data-easing="swing"
data-css3-animation=""
data-intermediate-delay="0">
<div class="lbg_inner_div" style="color:#ffffff;border-width:1px;border-style:solid;border-color:#ffffff;"><a href="http://codecanyon.net/user/LambertGroup?ref=LambertGroup" target="_blank">Enjoy Them RIGHT HERE!</a></div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_HugeGrand"
data-initial-left="1214"
data-initial-top="161"
data-final-left="1214"
data-final-top="161"
data-duration="0.6"
data-fade-start="0"
data-delay="2"
data-easing="swing"
data-css3-animation="perspectiveUpRetourn"
data-intermediate-delay="0">
<div class="lbg_inner_div" style="color:#ffffff;border-width:0px;border-style:solid;">2</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_LargeGrand"
data-initial-left="1384"
data-initial-top="195"
data-final-left="1384"
data-final-top="195"
data-duration="0.5"
data-fade-start="0"
data-delay="1"
data-easing="swing"
data-css3-animation="perspectiveLeftRetourn"
data-intermediate-delay="0">
<div class="lbg_inner_div" style="color:#ffffff;border-width:0px;border-style:solid;">MORE<br />ZOOM IN/OUT<br />SKINS</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_TinyGrand"
data-initial-left="1230"
data-initial-top="110"
data-final-left="1230"
data-final-top="110"
data-duration="0.5"
data-fade-start="0"
data-delay="0"
data-easing="swing"
data-css3-animation="rotateIn"
data-intermediate-delay="0">
<div class="lbg_inner_div" style="color:#ffffff;border-width:0px;border-style:solid;">Certainly this is the collection of Zoom In/Out sliders <br /> that you have longed for. Grab it now!</div>
</div>
</div>



<div id="bannerscollection_zoominout_photoText75" class="bannerscollection_zoominout_texts">
<div class="bannerscollection_zoominout_text_line lbg1_LargeGrand"
data-initial-left="1084"
data-initial-top="164"
data-final-left="1084"
data-final-top="164"
data-duration="0.5"
data-fade-start="0"
data-delay="6"
data-easing="swing"
data-css3-animation="scaleOut"
data-intermediate-delay="0">
<div class="lbg_inner_div" style="color:#ffffff;border-width:0px;border-style:solid;">Thanks To New Updates</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_MediumGrand"
data-initial-left="1084"
data-initial-top="124"
data-final-left="1084"
data-final-top="124"
data-duration="0.6"
data-fade-start="0"
data-delay="5"
data-easing="swing"
data-css3-animation="foolishIn"
data-intermediate-delay="2"
data-intermediate-left="1086"
data-intermediate-top="221"
data-intermediate-duration="0.6"
data-intermediate-easing="swing"
data-intermediate-css3-animation="slideDown">
<div class="lbg_inner_div" style="color:#ffffff;border-width:0px;border-style:solid;">It&#8217;s easier to give life to your ideas</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_MediumGrand"
data-initial-left="1000"
data-initial-top="300"
data-final-left="1086"
data-final-top="221"
data-duration="0.6"
data-fade-start="0"
data-delay="0.6"
data-easing="swing"
data-css3-animation="skew"
data-intermediate-delay="2"
data-intermediate-left="1086"
data-intermediate-top="221"
data-intermediate-duration="0.6"
data-intermediate-easing="swing"
data-intermediate-css3-animation="foolishOut">
<div class="lbg_inner_div" style="color:#ffffff;border-width:0px;border-style:solid;">Any color, CSS and HTML formated</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_LargeGrand"
data-initial-left="1900"
data-initial-top="154"
data-final-left="1084"
data-final-top="154"
data-duration="0.5"
data-fade-start="0"
data-delay="0.3"
data-easing="swing"
data-css3-animation="skew"
data-intermediate-delay="1.8"
data-intermediate-left="1084"
data-intermediate-top="154"
data-intermediate-duration="0.6"
data-intermediate-easing="swing"
data-intermediate-css3-animation="rollOutRight">
<div class="lbg_inner_div" style="color:#ffffff;border-width:0px;border-style:solid;">Top, Bottom, Left And Right</div>
</div>

<div class="bannerscollection_zoominout_text_line lbg1_MediumGrand"
data-initial-left="480"
data-initial-top="110"
data-final-left="1086"
data-final-top="110"
data-duration="0.6"
data-fade-start="0"
data-delay="0.1"
data-easing="swing"
data-css3-animation="skew"
data-intermediate-delay="1.5"
data-intermediate-left="1086"
data-intermediate-top="110"
data-intermediate-duration="0.5"
data-intermediate-easing="swing"
data-intermediate-css3-animation="rollOutLeft">
<div class="lbg_inner_div" style="color:#ffffff;border-width:0px;border-style:solid;">Animated text from any direction</div>
</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 10

You can define the time (in seconds) until the next slide will play. If you set it 0 the banner will not autoplay

*** If needed, for each slide you can set particular auto-play time, usind 'data-autoPlay' parameter. Please refer to Slider Content Definition section
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
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
showPauseButton true Possible values:
true - shows pause button
false - hides pause button
setAsBg
 false Possible values:
true - if you intend to use the plugin as full screen background
false - if you don't intend to use the plugin as full screen background
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
ease
ease-in
ease-out
ease-in-out
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInQuint
easeOutQuint
easeInOutQuint
easeInCirc
easeOutCirc
easeInOutCirc
easeInBack
easeOutBack
easeInOutBack

*** If needed, for each element you can set particular easing, usind 'data-easing' parameter. Please refer to Layer Animation section
thumbsWrapperMarginTop 0 the vertical pozition of the thumbs area (also available for opportune skin)
hideControlsUnder 768 the resolution under which the 'next' & 'previous' navigation buttons will not be visible. If you set 0 this parameter will be ignored and the navigation buttons will be always visible no matter the screen resolution.
     
Ken Burns Effect Settings
horizontalPosition 'center'

Using this parameter the script will determine both the photo initial horizontal pozition and KenBurns effect direction
Possible values:
- left
- center
- right
verticalPosition 'center' Using this parameter the script will determine both the photo initial vertical pozition and KenBurns 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 KenBurns effect duration in seconds
durationIEfix 30 this value will be added to the 'duration' value for IE (versions under IE10) 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.
zoomEasing 'ease'

the KenBurns effect default easing
Possible values:
linear
swing
ease
ease-in
ease-out
ease-in-out
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInQuint
easeOutQuint
easeInOutQuint
easeInCirc
easeOutCirc
easeInOutCirc
easeInBack
easeOutBack
easeInOutBack
     
Thumbs Settings - available only for majestic and generous 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
     
Circle Timer Settings
showCircleTimer true Possible values:
true - shows the circle timer
false - hides the circle timer
circleRadius 13 circle radius
circleLineWidth 2 circle line width
circleColor "#FFFFFF" circle color, in hexa
circleAlpha 100 circle alpha, in percents. Posible values 0-100
behindCircleColor "#FFFFFF" behind circle color, in hexa
behindCircleAlpha 20 behind circle alpha, in percents. Posible values 0-100
     
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 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 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 Animation section
defaultExitFade 1

the default opacity value, for layer exit (values between 0-1)

*** If needed, for each element you can set particular exit duratio, usind 'data-exit-fade parameter. Please refer to Layer 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 Animation section
defaultExitEasing 'swing'

the default easing, for layer exit (in pixels)
Possible values:
linear
swing
ease
ease-in
ease-out
ease-in-out
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInQuint
easeOutQuint
easeInOutQuint
easeInCirc
easeOutCirc
easeInOutCirc
easeInBack
easeOutBack
easeInOutBack

*** If needed, for each element you can set particular exit easing, usind 'data-exit-easing' parameter. Please refer to Layer Animation section
defaultExitOFF false

Possible values:
true - the layers will not exit
false - the layers will exit and according to exit left, top, delay, duration and easing value

*** If needed, for each element you can set particular exit OFF, usind 'data-exit-off' parameter. Please refer to Layer 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
     

Example of usage:

jQuery('#bannerscollection_zoominout_opportune').bannerscollection_zoominout({
skin: 'opportune',
responsive:true,
autoPlay:10,
width: 960,
height: 400,
circleRadius:8,
circleLineWidth:4,
circleColor: "#ffffff", //849ef3
circleAlpha: 50,
behindCircleColor: "#000000",
behindCircleAlpha: 20,
fadeSlides:false,
thumbsWrapperMarginTop:30
});

 

 

Slider Content Definition

Inside the main div (ex: <div id="bannerscollection_zoominout_opportune">) you'll add a list:
<ul class="bannerscollection_zoominout_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="bannerscollection_zoominout_opportune">

<ul class="bannerscollection_zoominout_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 KenBurns 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 KenBurns effect direction
Possible values:
- top
- center
- bottom
data-initialZoom <li data-initialZoom="1">html content here</li> initial photo zoom value. We recommend values between 0.5 - 1
data-finalZoom <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 KenBurns effect duration in seconds
data-zoomEasing <li data-zoomEasing="linear">html content here</li>

the KenBurns effect easing
Possible values:
linear
swing
ease
ease-in
ease-out
ease-in-out
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInQuint
easeOutQuint
easeInOutQuint
easeInCirc
easeOutCirc
easeInOutCirc
easeInBack
easeOutBack
easeInOutBack

*** If needed, for each element you can set particular exit easing, usind 'data-exit-easing' parameter. Please refer to Layer Animation section
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-autoPlay <li data-text-id="#text_id_animation" data-autoPlay="5">html content here</li> You can define for each slide the time (in seconds) until the next slide will play. If you set it 0 the slider will not autoplay
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

 

 

 

Layer Animation

For each image you can define animated layer (text line or image). 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 layer will look like this. What you see below with red are mandatory classes:

<div id="text_id_animation" class="bannerscollection_zoominout_texts">

<div class="bannerscollection_zoominout_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">

<div class="lbg_inner_div"> Line 1</div>
</div>
<div class="bannerscollection_zoominout_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">
<div class="lbg_inner_div"> Line 2</div>
</div>

</div>

 

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

Parameter Description
Layer Enter Parameters
data-initial-left the layer left initial postion (in pixels)
data-initial-top the layer top initial postion (in pixels)
data-final-left the layer left final postion (in pixels)
data-final-top the layer 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
ease
ease-in
ease-out
ease-in-out
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInQuint
easeOutQuint
easeInOutQuint
easeInCirc
easeOutCirc
easeInOutCirc
easeInBack
easeOutBack
easeInOutBack

*** If this parameter is not added, the value of JS parameter 'defaultEasing, will be used. Please refer to JS options section.
data-css3-animation The initial CSS3 prebuilt animation for layer. Possible values:
alreadyRotate
alreadyRotate_90
awesome
awesome ul
awesome ul li
bigEntrance
boingInUp
boingOutDown
bombLeftOut
bombRightOut
bounce
bounceIn
bounceOut
changeColorToRed
changeColorToBlack
changeColorToWhite
changeColorToOrange
changeColorToPink
CoolBaloonFixed
CoolBaloonFullWidth
CoolCloud1
CoolCloud2
CoolCloud3
coolBarBottom
coolBarCenter
coolBarCenterFixed
coolBarRight
coolBarLeft
coolBarRightMin
coolBarLeftMin
coolBarRightMinRegular
coolBarLeftMinRegular
dance
expandUp
fadeIn
flash
flashBang
flip
flipBookCenter_Cover1
flipBookCenter_Cover2
flipBookLeft_Cover1
flipBookLeft_Cover2
flipBookRight_Cover3
flipBookRight_Cover4
flipInX
flipInY
flipOutX
flipOutY
flipXFast3d
flipX3dPerpetuum
flipY3dPerpetuum
flipYFastRight3d
flipYFastLeft3d
flipYFastRight3dChangeColor
flipYFastLeft3dChangeColor
flipYFastLeft3dSpecialColor
flipYFastLeft3dSpecialColor2
floating
floatingEasy
foolishIn
foolishOut
hatch
hinge
hinge2
holeOut
jamp
jello
journal
lightSpeedInLeft
lightSpeedInRight
lightSpeedOutRight
lightSpeedOutLeft
magic
magnifying
openDownRight
openUpLeft
openUpRight
openDownLeftRetourn
openDownRightRetourn
openUpLeftRetourn
openUpRightRetourn
openDownLeftOut
openDownRightOut
openUpLeftOut
openUpRightOut
perpetuumChainLink1
perpetuumChainLink2
perspectiveLeft
perspectiveRight
perspectiveRightIn
perspectiveUp
perspectiveDownZero
perspectiveDown
perspectiveLeftRetourn
perspectiveRightRetourn
perspectiveUpRetourn
perspectiveDownRetourn
rollInRight
rollInLeft
rollOutRight
rollOutLeft
rotateEaseForward
rotateEaseBackward
rotateFastForward
rotateFastBackward
rotateLeft
rotateRight
rotateUp
rotateDown
rotateInRight
rotateInLeft
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
rubberBand
scaleBounce
scaleIn
scaleInMin
scaleInExit
scaleInExitBounce
scaleOut
scaleOutBounce
shake
skew
slideDown
slideUp
slideLeft
slideRight
slideExpandUp
snow1
snow2
snow3
spaceInUp
spaceInDown
spaceInLeft
spaceInRight
spaceOutUp
stretchRight
swap
swashIn
swashOut
swing
tada
typing_and_erasing
typing
tinLeftIn
tinRightIn
tinUpIn
tinDownIn
tinLeftOut
tinRightOut
tinUpOut
tinDownOut
tossing
twisterInUp
twisterInDown
vanishIn
vanishOut
wobble
zoomIn
zoomOut
zoomOutSlowly
zoomInRight
zoomInUp
zoomInDown
zoomOutLeft
zoomOutRight
zoomOutUp
zoomOutDown
planeFW
planeFWFixed
planeBW
planeBWFixed
planeBW2
magnifyingBounce
stamp
returnsToZero
pulse
pullLeftBoxRegularRZ
lbg1_bgk
slideBox_RightFromLeft
slideBox_LeftFromRight
slideBox_RightFromLeft_min
slideBox_LeftFromRight_min
slideBox_TopFromBottom
slideBox_BottomFromTop
slideBox_TopFromBottom_min
slideBox_BottomFromTop_min
slideBox_TopFromBottom_full
slideBox_TopFromBottom_full_min
   
   
   
Layer Intermediate Move Parameters
data-intermediate-left the layer intermediate move left postion (in pixels)
data-intermediate-top the layer intermediate move top postion (in pixels)
data-intermediate-duration the layer intermediate move duration (in seconds)
data-intermediate-easing

The intermediate move easing Possible values:
linear
swing
ease
ease-in
ease-out
ease-in-out
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInQuint
easeOutQuint
easeInOutQuint
easeInCirc
easeOutCirc
easeInOutCirc
easeInBack
easeOutBack
easeInOutBack

 
data-intermediate-delay the layer intermediate move delay time (in seconds)
data-intermediate-css3-animation The intermediate CSS3 prebuilt animation for layer. Possible values:
alreadyRotate
alreadyRotate_90
awesome
awesome ul
awesome ul li
bigEntrance
boingInUp
boingOutDown
bombLeftOut
bombRightOut
bounce
bounceIn
bounceOut
changeColorToRed
changeColorToBlack
changeColorToWhite
changeColorToOrange
changeColorToPink
CoolBaloonFixed
CoolBaloonFullWidth
CoolCloud1
CoolCloud2
CoolCloud3
coolBarBottom
coolBarCenter
coolBarCenterFixed
coolBarRight
coolBarLeft
coolBarRightMin
coolBarLeftMin
coolBarRightMinRegular
coolBarLeftMinRegular
dance
expandUp
fadeIn
flash
flashBang
flip
flipBookCenter_Cover1
flipBookCenter_Cover2
flipBookLeft_Cover1
flipBookLeft_Cover2
flipBookRight_Cover3
flipBookRight_Cover4
flipInX
flipInY
flipOutX
flipOutY
flipXFast3d
flipX3dPerpetuum
flipY3dPerpetuum
flipYFastRight3d
flipYFastLeft3d
flipYFastRight3dChangeColor
flipYFastLeft3dChangeColor
flipYFastLeft3dSpecialColor
flipYFastLeft3dSpecialColor2
floating
floatingEasy
foolishIn
foolishOut
hatch
hinge
hinge2
holeOut
jamp
jello
journal
lightSpeedInLeft
lightSpeedInRight
lightSpeedOutRight
lightSpeedOutLeft
magic
magnifying
openDownRight
openUpLeft
openUpRight
openDownLeftRetourn
openDownRightRetourn
openUpLeftRetourn
openUpRightRetourn
openDownLeftOut
openDownRightOut
openUpLeftOut
openUpRightOut
perpetuumChainLink1
perpetuumChainLink2
perspectiveLeft
perspectiveRight
perspectiveRightIn
perspectiveUp
perspectiveDownZero
perspectiveDown
perspectiveLeftRetourn
perspectiveRightRetourn
perspectiveUpRetourn
perspectiveDownRetourn
rollInRight
rollInLeft
rollOutRight
rollOutLeft
rotateEaseForward
rotateEaseBackward
rotateFastForward
rotateFastBackward
rotateLeft
rotateRight
rotateUp
rotateDown
rotateInRight
rotateInLeft
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
rubberBand
scaleBounce
scaleIn
scaleInMin
scaleInExit
scaleInExitBounce
scaleOut
scaleOutBounce
shake
skew
slideDown
slideUp
slideLeft
slideRight
slideExpandUp
snow1
snow2
snow3
spaceInUp
spaceInDown
spaceInLeft
spaceInRight
spaceOutUp
stretchRight
swap
swashIn
swashOut
swing
tada
typing_and_erasing
typing
tinLeftIn
tinRightIn
tinUpIn
tinDownIn
tinLeftOut
tinRightOut
tinUpOut
tinDownOut
tossing
twisterInUp
twisterInDown
vanishIn
vanishOut
wobble
zoomIn
zoomOut
zoomOutSlowly
zoomInRight
zoomInUp
zoomInDown
zoomOutLeft
zoomOutRight
zoomOutUp
zoomOutDown
planeFW
planeFWFixed
planeBW
planeBWFixed
planeBW2
magnifyingBounce
stamp
returnsToZero
pulse
pullLeftBoxRegularRZ
lbg1_bgk
slideBox_RightFromLeft
slideBox_LeftFromRight
slideBox_RightFromLeft_min
slideBox_LeftFromRight_min
slideBox_TopFromBottom
slideBox_BottomFromTop
slideBox_TopFromBottom_min
slideBox_BottomFromTop_min
slideBox_TopFromBottom_full
slideBox_TopFromBottom_full_min
   
Layer 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-fade

exit fade value. Values from 0 to 1

*** If this parameter is not added, the value of JS parameter 'defaultExitFade', will be used. Please refer to JS options section
data-exit-easing The easing for layer exit animation. Possible values:
linear
swing
ease
ease-in
ease-out
ease-in-out
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInQuint
easeOutQuint
easeInOutQuint
easeInCirc
easeOutCirc
easeInOutCirc
easeInBack
easeOutBack
easeInOutBack

*** 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:
true - the layer will not exit
false - the layer will exit according to exit left, top, delay, duration and easing value

*** If this parameter is not added, the value of JS parameter 'defaultExitOFF', will be used. Please refer to JS options section
data-exit-css3-animation The exit CSS3 prebuilt animation for layer. Possible values:
alreadyRotate
alreadyRotate_90
awesome
awesome ul
awesome ul li
bigEntrance
boingInUp
boingOutDown
bombLeftOut
bombRightOut
bounce
bounceIn
bounceOut
changeColorToRed
changeColorToBlack
changeColorToWhite
changeColorToOrange
changeColorToPink
CoolBaloonFixed
CoolBaloonFullWidth
CoolCloud1
CoolCloud2
CoolCloud3
coolBarBottom
coolBarCenter
coolBarCenterFixed
coolBarRight
coolBarLeft
coolBarRightMin
coolBarLeftMin
coolBarRightMinRegular
coolBarLeftMinRegular
dance
expandUp
fadeIn
flash
flashBang
flip
flipBookCenter_Cover1
flipBookCenter_Cover2
flipBookLeft_Cover1
flipBookLeft_Cover2
flipBookRight_Cover3
flipBookRight_Cover4
flipInX
flipInY
flipOutX
flipOutY
flipXFast3d
flipX3dPerpetuum
flipY3dPerpetuum
flipYFastRight3d
flipYFastLeft3d
flipYFastRight3dChangeColor
flipYFastLeft3dChangeColor
flipYFastLeft3dSpecialColor
flipYFastLeft3dSpecialColor2
floating
floatingEasy
foolishIn
foolishOut
hatch
hinge
hinge2
holeOut
jamp
jello
journal
lightSpeedInLeft
lightSpeedInRight
lightSpeedOutRight
lightSpeedOutLeft
magic
magnifying
openDownRight
openUpLeft
openUpRight
openDownLeftRetourn
openDownRightRetourn
openUpLeftRetourn
openUpRightRetourn
openDownLeftOut
openDownRightOut
openUpLeftOut
openUpRightOut
perpetuumChainLink1
perpetuumChainLink2
perspectiveLeft
perspectiveRight
perspectiveRightIn
perspectiveUp
perspectiveDownZero
perspectiveDown
perspectiveLeftRetourn
perspectiveRightRetourn
perspectiveUpRetourn
perspectiveDownRetourn
rollInRight
rollInLeft
rollOutRight
rollOutLeft
rotateEaseForward
rotateEaseBackward
rotateFastForward
rotateFastBackward
rotateLeft
rotateRight
rotateUp
rotateDown
rotateInRight
rotateInLeft
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
rubberBand
scaleBounce
scaleIn
scaleInMin
scaleInExit
scaleInExitBounce
scaleOut
scaleOutBounce
shake
skew
slideDown
slideUp
slideLeft
slideRight
slideExpandUp
snow1
snow2
snow3
spaceInUp
spaceInDown
spaceInLeft
spaceInRight
spaceOutUp
stretchRight
swap
swashIn
swashOut
swing
tada
typing_and_erasing
typing
tinLeftIn
tinRightIn
tinUpIn
tinDownIn
tinLeftOut
tinRightOut
tinUpOut
tinDownOut
tossing
twisterInUp
twisterInDown
vanishIn
vanishOut
wobble
zoomIn
zoomOut
zoomOutSlowly
zoomInRight
zoomInUp
zoomInDown
zoomOutLeft
zoomOutRight
zoomOutUp
zoomOutDown
planeFW
planeFWFixed
planeBW
planeBWFixed
planeBW2
magnifyingBounce
stamp
returnsToZero
pulse
pullLeftBoxRegularRZ
lbg1_bgk
slideBox_RightFromLeft
slideBox_LeftFromRight
slideBox_RightFromLeft_min
slideBox_LeftFromRight_min
slideBox_TopFromBottom
slideBox_BottomFromTop
slideBox_TopFromBottom_min
slideBox_BottomFromTop_min
slideBox_TopFromBottom_full
slideBox_TopFromBottom_full_min
   

 

 

 

How To Use It As FullScreen Background

1. Set the following parameters:
setAsBg:true,
width: 1920,
height: 1200,
width100Proc:true,
height100Proc:true,

Example of usage:

jQuery('#bannerscollection_zoominout_opportune').bannerscollection_zoominout({
skin: 'opportune',
setAsBg:true,
width: 1920,
height: 1200,
width100Proc:true,
height100Proc:true,
showNavArrows:true,
showBottomNav:true,
autoHideBottomNav:true,
thumbsWrapperMarginTop: -55,
pauseOnMouseOver:false
});

2. Just after <body> tag copy the slider code.

 

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('#bannerscollection_zoominout_opportune').bannerscollection_zoominout({
skin: 'opportune',
width: 940,
height: 364,
initialZoom:1,
initialZoom:1,
duration:0,
durationIEfix:0
});

Example 2 (for the a particular slide):
<li data-initialZoom="1" data-finalZoom="1" data-duration"0" >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;
}