{"version": "2.0","name": "Revolution Responsive jQuery Slider","subline": "","username": "ThemePunch","created": "06/22/2012","website": "http://www.codecanyon.com/user/themepunch?ref=themepunch","update": "06/08/2013","update_today": true,"email": "info@themepunch.com","description": "","intro": "For support please checkout http://themepunch.ticksy.com !","button_1_text": "","button_2_text": "","button_3_text": "","button_1_url": "","button_2_url": "","button_3_url": "","sections": [{"title": "How to start","id": "how_to_start","content": "<p>\tThis chapter will gives you general instructions on how to install the slider and setup the options. Later chapters will be more detailed if needed.</p>\n<p>\t </p>\n<h4>\n\tWhat files do I need to upload to my server?</h4>\n<p>\tPlease upload the rs-plugin folder to your server. In this folder you will find the following subfolders containing all of the items content:</p>\n<ul>\t<li>\t\tjs</li>\n\t<li>\t\tcss</li>\n\t<li>\t\tassets</li>\n</ul>\n<p>\tYou could use your own jQuery but we recommend loading it directly from the Google ressources (see later in this documentation).</p>\n<p>\tYou will find many <strong>examples</strong> in your downloaded zip under the <strong>examples&sources</strong> folder.. </p>\n<p>\t </p>\n<h4>\n\tImplement the jQuery</h4>\n<p>\tAdd the following lines to your HTML Head: </p>\n<pre class=\"js\">\n<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js></pre>\n<p>\t </p>\n<h4>\n\tAdd Revolution js and css files to your HTML page</h4>\n<div>\n\t </div>\n<div>\n\tAlso in the <HEAD> section:</div>\n<div>\n\t </div>\n<div>\n\t<pre class=\"html\">\n<!-- jQuery REVOLUTION Slider -->\n<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>\n<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>\n\n<!-- REVOLUTION BANNER CSS SETTINGS -->\n<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />\n</pre>\n\t<div>\n\t\t </div>\n</div>\n<div>\n\tThis contains the JS and CSS for the Slider itself and some helping modules .</div>\n<div>\n\t </div>\n<div>\n\t </div>\n<div>\n\t<h4>\n\t\tCreate a Container for the Banner</h4>\n\t<div>\n\t\t </div>\n\t<div>\n\t\tPut it in the HTML: (the class names used here are only examples. In our Example files we called them banner-container, fullwidthbanner-container and fullscreenbanner-container, different then here below ! )</div>\n\t<pre class=\"html\">\n<div class="bannercontainer">\n<div class="banner">...</div>\n</div>\n</pre>\n\t<div>\n\t\tThe Banner-container can have different Styling depending on that, which layout you wish to use. </div>\n\t<div>\n\t\t </div>\n\t<div>\n\t\t<h5>\n\t\t\tResponsive Style </h5>\n\t\t<p>\t\t\tThis Style allows you to creat predefined container sizes, undependent from sourrounding container, and create Medai Query (Browsr Size) Dependent responsive alterantives.</p>\n\t\t<p>\t\t\tIt requests</p>\n\t\t<ul>\t\t\t<li>\t\t\t\ta container with predefined Width and Height Attributes,</li>\n\t\t\t<li>\t\t\t\tMedia Query dependent Sizing. - this should be always with the same proportion. Means Width/Height should always have the same result !!!</li>\n\t\t</ul>\n\t\t<p>\t\t\tPut this in your CSS File (i.e) :</p>\n\t\t<pre class=\"css\">\n<strong>.bannercontainer</strong> {\npadding:0px;\nbackground-color:#fff;\nwidth:960px;\nposition:relative;\nposition:relative;\nmargin-left:auto;\nmargin-right:auto;\n}\n\n<strong>.banner</strong>{\nwidth:960px;\nheight:500px;\nposition:relative;\noverflow:hidden;\n}\n\n<strong>@media only screen and (min-width: 768px) and (max-width: 959px)</strong> {\n <span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span> .banner, .bannercontainer<span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>{<span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>width:760px; height:395px;}\n}\n\n\n<strong>@media only screen and (min-width: 480px) and (max-width: 767px)</strong> {\n .banner, .bannercontainer<span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>{<span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>width:480px; height:250px;<span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>}\n}\n\n<strong>@media only screen and (min-width: 0px) and (max-width: 479px)</strong> {\n .banner, .bannercontainer<span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>{<span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>width:320px;height:166px;<span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>}\n}</pre>\n\t\t<div>\n\t\t\t </div>\n\t\t<h5>\n\t\t\tFullWidth Style</h5>\n\t\t<p>\t\t\tThis Style allows you to have the banner always fit in the maximum width of the Sourrounding Container. </p>\n\t\t<p>\t\t\tIt requests:</p>\n\t\t<ul>\t\t\t<li>\t\t\t\ta Fluid wrapping container (which will always change the size depending on browser size. I.e. width:100% etc.. </li>\n\t\t</ul>\n\t\t<p>\t\t\tPut this in your CSS File </p>\n\t\t<pre class=\"css\">\n.<strong>bannercontainer</strong>{\nwidth:100% !important;\nposition:relative;\npadding:0;\nmax-height:500px !important;\noverflow:hidden;\n}</pre>\n\t</div>\n\t<div>\n\t\t<h4>\n\t\t\t </h4>\n\t\t<h5>\n\t\t\tFullScreen Style</h5>\n\t\t<p>\t\t\tThis Style allows you to have a banner always fit in the maxium screensize. In Some option you can select containers which will reduce the height of the banner with the height of the container. See examples.</p>\n\t\t<p>\t\t\tIt requests:</p>\n\t\t<ul>\t\t\t<li>\t\t\t\ta fullwidth and fullheight wrapping container</li>\n\t\t</ul>\n\t\t<p>\t\t\tPut this in your CSS File</p>\n\t\t<pre class=\"css\">\n.<strong>bannercontainer</strong> {\nwidth:100% !important;\nposition:relative;\npadding:0;\nheight:100%;\n}</pre>\n\t\t<h4>\n\t\t\t </h4>\n\t\t<h4>\n\t\t\tCreate Your First Slides</h4>\n\t\t<p>\t\t\tCreate an Unordered list inside the banner container where each <li> element will correspond to one slide.</p>\n\t\t<p>\t\t\t </p>\n\t\t<pre class=\"html\">\n<ul>\n<!-- THE BOXSLIDE EFFECT EXAMPLES WITH LINK ON THE MAIN SLIDE EXAMPLE -->\n\n <li data-transition="boxslide" data-slotamount="7" data-link="http://www.google.de"> \n <img src="images/slides/image1.jpg">\n <div class="caption sft big_white" data-x="400" data-y="100" data-speed="700" data-start="1700" data-easing="easeOutBack">KICKSTART YOUR WEBSITE</div>\n <div class="caption sfb big_orange" data-x="400" data-y="142" data-speed="500" data-start="1900" data-easing="easeOutBack">WITH SLIDER REVOLUTION!</div>\n <div class="caption lfr medium_grey" data-x="510" data-y="210" data-speed="300" data-start="2000">UNLIMITED TRANSITIONS</div>\n </li>\n...\n</ul></pre>\n\t\t<div>\n\t\t\t </div>\n\t\t<h4>\n\t\t\tCall the jQuery Plugin to build the Slider (Options need to be set of course...)</h4>\n\t\t<p>\t\t\t </p>\n\t\t<pre class=\"js\">\n<script type="text/javascript">\n\n var tpj=jQuery;\n tpj.noConflict();\n tpj(document).ready(function() {\n if (tpj.fn.cssOriginal!=undefined)\n tpj.fn.css = tpj.fn.cssOriginal;\n tpj('.fullscreenbanner').revolution({\n delay:9000,\n startwidth:960,\n startheight:500,\n\n onHoverStop:"on",\n\n thumbWidth:100,\n thumbHeight:50,\n thumbAmount:3,\n\n hideThumbs:0,\n\n navigationType:"bullet",\n navigationArrows:"solo",\n navigationStyle:"round",\n navigationHAlign:"left",\n navigationVAlign:"bottom",\n navigationHOffset:30,\n navigationVOffset:30,\n\n soloArrowLeftHalign:"left",\n soloArrowLeftValign:"center",\n soloArrowLeftHOffset:20,\n soloArrowLeftVOffset:0,\n\n soloArrowRightHalign:"right",\n soloArrowRightValign:"center",\n soloArrowRightHOffset:20,\n soloArrowRightVOffset:0,\n\n touchenabled:"on",\n\n stopAtSlide:-1,\n stopAfterLoops:-1,\n hideCaptionAtLimit:0,\n hideAllCaptionAtLilmit:0,\n hideSliderAtLimit:0,\n\n fullWidth:"off",\n fullScreen:"off",\n fullScreenOffsetContainer:"#topheader-to-offset",\n\n shadow:0\n\n });\n\n });\n\n</script></pre>\n\t</div>\n</div>\n<p>\t </p>\n"},{"title": "Options","id": "options","content": "<h3>\n\tThe Options to Initialise the Plugin (Theme Sorted):</h3>\n<h5>\n\tGlobal Settings:</h5>\n<div>\n\t<ul>\t\t<li>\t\t\t<strong>delay</strong> <br>\n\t\t\t<br>\n\t\t\tThe time one slide stays on the screen in Milliseconds. Global Setting. You can set per Slide extra local delay time via the data-delay in the <li> element (Default: 9000)<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>startheight </strong><br>\n\t\t\t<br>\n\t\t\tThis Height of the Grid where the Captions are displayed in Pixel. This Height is the Max height of Slider in Fullwidth Layout and in Responsive Layout. In Fullscreen Layout the Gird will be centered Vertically in case the Slider is higher then this value.<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>startwidth </strong><br>\n\t\t\t<br>\n\t\t\tThis Height of the Grid where the Captions are displayed in Pixel. This Width is the Max Width of Slider in Responsive Layout. In Fullscreen and in FullWidth Layout the Gird will be centered Horizontally in case the Slider is wider then this value.<br>\n\t\t\t </li>\n\t</ul>\n\t<h5>\n\t\tNavigation Settings:</h5>\n\t<ul>\t\t<li>\t\t\t<strong>onHoverStop</strong><br>\n\t\t\t<br>\n\t\t\tPossible Values: "on", "off" - Stop the Timer if mouse is hovering the Slider. Caption animations are not stopped !! They will just play to the end.<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>thumbWidth / thumbHeight</strong><br>\n\t\t\t<br>\n\t\t\tThe width and height of the thumbs in pixel. Thumbs are not responsive from basic. For Responsive Thumbs you will need to create media qury based thumb sizes. <br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>thumbAmount</strong><br>\n\t\t\t<br>\n\t\t\tThe Amount of visible Thumbs in the same time. The rest of the thumbs are only visible on hover, or at slide change.<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>hideThumbs</strong><br>\n\t\t\t<br>\n\t\t\t0 - Never hide Thumbs. 1000- 100000 (ms) hide thumbs and navigation arrows, bullets after the predefined ms (1000ms == 1 sec, 1500 == 1,5 sec etc..)</li>\n\t</ul>\n\t<ul>\t\t<li>\t\t\t<strong>navigationType</strong> Display type of the navigation bar (Default:"none")<br>\n\t\t\t<br>\n\t\t\tPossible values are: "bullet", "thumb", "none" <br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>navigationArrows</strong> Display position of the Navigation Arrows (Default: "nexttobullets")<br>\n\t\t\t<br>\n\t\t\tPossible values are "nexttobullets", "solo" <br>\n\t\t\tnexttobullets - arrows added next to the bullets left and right<br>\n\t\t\tsolo - arrows can be independent positioned, see further options<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>navigationStyle</strong> Look of the navigation bullets if navigationType "bullet" selected.<br>\n\t\t\t<br>\n\t\t\tPossible values: "round", "square", "round-old", "square-old", "navbar-old"<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>navigationHAlign, navigationVAlign</strong><br>\n\t\t\t<br>\n\t\t\tVertical and Horizontal Align of the Navigation bullets / thumbs (depending on which Style has been selected). Possible values navigationHAlign: "left","center","right" and naigationVAlign: "top","center","bottom"<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>navigationHOffset navigationVOffset</strong><br>\n\t\t\t<br>\n\t\t\tThe Offset position of the navigation depending on the aligned position. from -1000 to +1000 any value in px. i.e. -30 <br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>soloArrowLeftHaling, soloArrowRightHalign, solorArrowLeftHalign, soloArrowRightHalign</strong><br>\n\t\t\t<br>\n\t\t\tVertical and Horizontal Align of the Navigation Arrows (left and right independent!) Possible values navigationHAlign: "left","center","right" and naigationVAlign: "top","center","bottom"<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>soloArrowLeftHOffset, soloArrowLeftVOffset, </strong><strong>soloArrowRightHVOffset, soloArrowRightVOffset</strong><br>\n\t\t\t<br>\n\t\t\tThe Offset position of the navigation depending on the aligned position. from -1000 to +1000 any value in px. i.e. -30 Each Arrow independent<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>touchenabled</strong> Enable Swipe Function on touch devices (Default: "on")<br>\n\t\t\t<br>\n\t\t\tPossible values: "on", "off"<br>\n\t\t\t </li>\n\t</ul>\n\t<h5>\n\t\tLoops</h5>\n\t<ul>\t\t<li>\t\t\t<strong>stopAtSlide</strong><br>\n\t\t\t<br>\n\t\t\tStop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>stopAfterLoops</strong><br>\n\t\t\t<br>\n\t\t\tStop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic<br>\n\t\t\t </li>\n\t</ul>\n\t<h5>\n\t\tMobile Visibility</h5>\n\t<ul>\t\t<li>\t\t\t<strong>hideCaptionAtLimit</strong><br>\n\t\t\t<br>\n\t\t\tIt Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>hideAllCaptionAtLimit</strong><br>\n\t\t\t<br>\n\t\t\tHide all The Captions if Width of Browser is less then this value<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>hideSliderAtLimit</strong><br>\n\t\t\t<br>\n\t\t\tHide the whole slider, and stop also functions if Width of Browser is less than this value</li>\n\t</ul>\n\t<h5>\n\t\t<br>\n\t\tLayout Styles</h5>\n\t<ul>\t\t<li>\t\t\t<strong>fullWidth</strong><br>\n\t\t\t<br>\n\t\t\tPossible Values: "on", "off" - defines if the fullwidth mode is activated<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>fullScreen</strong><br>\n\t\t\t<br>\n\t\t\tPossible Values: "on", "off" - defines if the fullscreen mode is activated<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>fullScreenOffsetContainer</strong><br>\n\t\t\t<br>\n\t\t\tThe value is a Container ID or Class i.e. "#topheader" - The Height of Fullheight will be increased with this Container height !<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>shadow</strong><br>\n\t\t\t<br>\n\t\t\tPossible values: 0,1,2,3 (0 == no Shadow, 1,2,3 - Different Shadow Types)<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>videoJsPath</strong><br>\n\t\t\t<br>\n\t\t\tThe Path to the VideoJs Files which are basically always under the rs-plugin/videojs/ folder. Default setting: videoJsPath:"rs-plugin/videojs/"<br>\n\t\t\t </li>\n\t</ul>\n</div>\n<p>\t </p>\n"},{"title": "Slides","id": "slides","content": "<h3>\n\tSlide Options</h3>\n<div>\n\t </div>\n<div>\n\t<strong><li></strong> - Every list item represents a new Slide. To Define Transitions, main links, etc. use the following <strong>data-</strong> values per list item.</div>\n<div>\n\t </div>\n<h5>\n\tTransition Effects</h5>\n<ul>\t<li>\t\t<strong>data-transition </strong><br>\n\t\t<br>\n\t\tThe appearance transition of this slide. You can define more than one, so in each loop the next slide transition type will be shown.<br>\n\t\t<div>\n\t\t\t<br>\n\t\t\t<strong>Basic Transitions: </strong></div>\n\t\t<div>\n\t\t\t </div>\n\t\t<div>\n\t\t\tboxslide,boxfade</div>\n\t\t<div>\n\t\t\tslotzoom-horizontal, slotzoom-vertical</div>\n\t\t<div>\n\t\t\tslotslide-horizontal, slotslide-vertical</div>\n\t\t<div>\n\t\t\tslotfade-horizontal, slotfade-vertical</div>\n\t\t<div>\n\t\t\tcurtain-1, curtain-2, curtain-3</div>\n\t\t<div>\n\t\t\tslideleft, slideright, slideup ,slidedown </div>\n\t\t<div>\n\t\t\tslidehorizontal, slidevertical</div>\n\t\t<div>\n\t\t\tfade</div>\n\t\t<div>\n\t\t\trandom</div>\n\t\t<div>\n\t\t\t </div>\n\t\t<div>\n\t\t\t<strong>Premium Transitions:</strong></div>\n\t\t<div>\n\t\t\t </div>\n\t\t<div>\n\t\t\tpapercut</div>\n\t\t<div>\n\t\t\tflyin</div>\n\t\t<div>\n\t\t\tturnoff</div>\n\t\t<div>\n\t\t\tcube</div>\n\t\t<div>\n\t\t\t3dcurtain-vertical</div>\n\t\t<div>\n\t\t\t3dcurtain-horizontal</div>\n\t\t<div>\n\t\t\tpremium-random<br>\n\t\t\t </div>\n\t</li>\n\t<li>\t\t<div>\n\t\t\t<strong>data-slotamount</strong> <br>\n\t\t\t<br>\n\t\t\tThe number of slots or boxes the slide is divided into. If you use boxfade, over 7 slots can be juggy.<br>\n\t\t\t </div>\n\t</li>\n\t<li>\t\t<div>\n\t\t\t<strong>data-masterspeed</strong><br>\n\t\t\t<br>\n\t\t\tThe speed of the transition in "ms". default value is 300 (0.3 sec)<br>\n\t\t\t </div>\n\t</li>\n\t<li>\t\t<strong>data-delay</strong> <br>\n\t\t<br>\n\t\tA new Dealy value for the Slide. If no delay defined per slide, the dealy defined via Options will be used<br>\n\t\t </li>\n</ul>\n<h5>\n\tLinks (Full Slide Links)</h5>\n<ul>\t<li>\t\t<strong>data-link</strong><br>\n\t\t<br>\n\t\tA link on the whole slide pic<br>\n\t\t </li>\n\t<li>\t\t<strong>data-target</strong><br>\n\t\t<br>\n\t\tThe target of the Link for the whole slide pic. (i.e. "_blank", "_self")<br>\n\t\t </li>\n\t<li>\t\t<strong>data-slideindex</strong><br>\n\t\t<br>\n\t\tPossible values: next,back, 1-x (where x is the max. Amount of slide) If this value is set, click on slide will call the next / previous, or n th Slide.<br>\n\t\t </li>\n</ul>\n<h5>\n\tThumbnail</h5>\n<ul>\t<li>\t\t<strong>data-thumb</strong><br>\n\t\t<br>\n\t\tAn Alternative Source for thumbs. If not defined a copy of the background image will be used in resized form</li>\n</ul>\n<p>\t </p>\n<h3>\n\tThe Main Image</h3>\n<p>\t<br>\n\tEach Slide (<li> </li>) <strong>MUST </strong>include a main image which is added as a simple <img> tag at the first level. It can be a Simpe image, a colored or transparent image, or dummy image as lazy load version.</p>\n<h5>\n\tSimple Image</h5>\n<pre class=\"html\">\n<img src="images/slides/slide13.jpg" ></pre>\n<h5>\n\tColored Background Instead of Image</h5>\n<pre class=\"html\">\n<img src="images/slides/transparent.png" style="background-color:#56e34a" ></pre>\n<h5>\n\tLazy Loaded Image</h5>\n<pre class=\"html\">\n<img src="images/slides/dummy.jpg" data-lazyload="images/slides/slide13.jpg"></pre>\n<div>\n\t </div>\n<div>\n\t<h3>\n\t\tThe Captions / Layers</h3>\n\t<p>\t\tEach <li> (slide) can include unlimited amount of Captions. Caption are simple html markups with iframe, image, heading , paragraph and any other tags. Each Caption must be wrapped via a <div class="caption"></div>.</p>\n\t<p>\t\tEach Caption has some special classes and some data- attributes, to set animation type, position, speed, easings etc.</p>\n\t<h5>\n\t\tCaption Classes</h5>\n\t<ul>\t\t<li>\t\t\t<strong>the "caption" class</strong><br>\n\t\t\t<br>\n\t\t\tIt is the Wrapping main Class which is a MUST. Each Caption need to be defined like this, other way the Slider Plugin can not identifikate the Caption container<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>Styleing Captions</strong> (like "big_white", "big_orange", "medium_grey" etc...)<br>\n\t\t\t<br>\n\t\t\tThese are Styling classes created in the settings.css You can add unlimited amount of Styles in your own css file, to style your captions at the top level already<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>Animation Classes</strong><br>\n\t\t\t<br>\n\t\t\tAnimation Classes defined the start / end animations on Captions. <br>\n\t\t\t<br>\n\t\t\t<em>Incoming Animation Classes:</em><br>\n\t\t\t<div>\n\t\t\t\t<br>\n\t\t\t\t<strong>sft</strong> - Short from Top</div>\n\t\t\t<div>\n\t\t\t\t<strong>sfb</strong> - Short from Bottom</div>\n\t\t\t<div>\n\t\t\t\t<strong>sfr</strong> - Short from Right</div>\n\t\t\t<div>\n\t\t\t\t<strong>sfl</strong> - Short from Left</div>\n\t\t\t<div>\n\t\t\t\t<strong>lft</strong> - Long from Top</div>\n\t\t\t<div>\n\t\t\t\t<strong>lfb</strong> - Long from Bottom</div>\n\t\t\t<div>\n\t\t\t\t<strong>lfr</strong> - Long from Right</div>\n\t\t\t<div>\n\t\t\t\t<strong>lfl</strong> - Long from Left</div>\n\t\t\t<div>\n\t\t\t\t<strong>fade</strong> - fading</div>\n\t\t\t<div>\n\t\t\t\t<strong>randomrotate</strong>- Fade in, Rotate from a Random position and Degree<br>\n\t\t\t\t<br>\n\t\t\t\t<em>Outgoing Animation Classes:</em><br>\n\t\t\t\t<br>\n\t\t\t\t<div>\n\t\t\t\t\t<strong>stt</strong> - Short to Top</div>\n\t\t\t\t<div>\n\t\t\t\t\t<strong>stb</strong> - Short to Bottom</div>\n\t\t\t\t<div>\n\t\t\t\t\t<strong>str</strong> - Short to Right</div>\n\t\t\t\t<div>\n\t\t\t\t\t<strong>stl</strong> - Short to Left</div>\n\t\t\t\t<div>\n\t\t\t\t\t<strong>ltt</strong> - Long to Top</div>\n\t\t\t\t<div>\n\t\t\t\t\t<strong>ltb</strong> - Long to Bottom</div>\n\t\t\t\t<div>\n\t\t\t\t\t<strong>ltr</strong> - Long to Right</div>\n\t\t\t\t<div>\n\t\t\t\t\t<strong>ltl</strong> - Long to Left</div>\n\t\t\t\t<div>\n\t\t\t\t\t<strong>fadeout</strong> - fading</div>\n\t\t\t\t<div>\n\t\t\t\t\t<strong>randomrotateout</strong>- Fade in, Rotate from a Random position and Degree</div>\n\t\t\t\t<div>\n\t\t\t\t\t </div>\n\t\t\t\t<div>\n\t\t\t\t\t </div>\n\t\t\t</div>\n\t\t</li>\n\t</ul>\n\t<h5>\n\t\tCaption data- settings</h5>\n\t<ul>\t\t<li>\t\t\t<strong>data-x</strong><br>\n\t\t\t<br>\n\t\t\tPossible Values are "left", "center", "right", or any Value between -2500 and 2500.<br>\n\t\t\tIf left/center/right is set, the caption will be siple aligned to the position. Any other "number" will simple set the left position in px of tha caption. <br>\n\t\t\t<br>\n\t\t\tAt "left" the left side of the caption is aligned to the left side of the slider.<br>\n\t\t\tAt "center" the center of caption is aligned to the center of slide. <br>\n\t\t\tAt "right" the caption right side is aligned to the right side of the Slider.<br>\n\t\t\t<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>data-y</strong><br>\n\t\t\t<br>\n\t\t\tPossible Values are "top", "center", "bottom", or any Value between -2500 and 2500. <br>\n\t\t\tIf top/center/bottom is set, the caption will be siple aligned to the position. Any other "number" will simple set the top position in px of tha caption.<br>\n\t\t\t<br>\n\t\t\tAt "top" the top side of the caption is aligned to the top side of the slider.<br>\n\t\t\tAt "center" the center of caption is aligned to the center of slide. <br>\n\t\t\tAt "bottom" the caption bottom side is aligned to the bottom side of the Slider.</li>\n\t</ul>\n\t<p>\t\t </p>\n\t<ul>\t\t<li>\t\t\t<strong>data-hoffset</strong><br>\n\t\t\t<br>\n\t\t\tOnly works if data-x set to left/center/right. It will move the Caption with the defined "px" from the aligned position. i.e. data-x="center" data-hoffset="-100" will put the caption 100px left from the slide center horizontaly. <br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>data-voffset</strong><br>\n\t\t\t<br>\n\t\t\tOnly works if data-y set to top/center/bottom. It will move the Caption with the defined "px" from the aligned position. i.e. data-x="center" data-hoffset="-100" will put the caption 100px left from the slide center vertically. <br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>data-speed</strong><br>\n\t\t\t<br>\n\t\t\tThe speed in milliseconds of the transition to move the Caption in the Slide at the defined timepoint.<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>data-start</strong><br>\n\t\t\t<br>\n\t\t\tThe timepoint in millisecond when/at the Caption should move in to the slide.<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>data-easing</strong><br>\n\t\t\t<br>\n\t\t\tThe Easing Art how the caption is moved in to the slide (<strong>note!</strong> Animation art set via Classes !).<br>\n\t\t\tPossible Values are:<br>\n\t\t\t<div>\n\t\t\t\teaseOutBack, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic</div>\n\t\t\t<div>\n\t\t\t\teaseInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint</div>\n\t\t\t<div>\n\t\t\t\teaseOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine</div>\n\t\t\t<div>\n\t\t\t\teaseInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc</div>\n\t\t\t<div>\n\t\t\t\teaseInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack</div>\n\t\t\t<div>\n\t\t\t\teaseInBounce, easeOutBounce, easeInOutBounce<br>\n\t\t\t\t </div>\n\t\t</li>\n\t\t<li>\t\t\t<strong>data-endspeed</strong><br>\n\t\t\t<br>\n\t\t\tThe speed in milliseconds of the transition to move the Caption out from the Slide at the defined timepoint.<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>data-end</strong><br>\n\t\t\t<br>\n\t\t\tThe timepoint in millisecond when/at the Caption should move out from the slide.<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>data-endeasing</strong><br>\n\t\t\t<br>\n\t\t\tThe Easing Art how the caption is moved out from the slide (<strong>note! </strong>Animation art set via Classes !). <br>\n\t\t\tPossible Values are:<br>\n\t\t\t<div>\n\t\t\t\teaseOutBack, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic</div>\n\t\t\t<div>\n\t\t\t\teaseInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint</div>\n\t\t\t<div>\n\t\t\t\teaseOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine</div>\n\t\t\t<div>\n\t\t\t\teaseInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc</div>\n\t\t\t<div>\n\t\t\t\teaseInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack</div>\n\t\t\t<div>\n\t\t\t\teaseInBounce, easeOutBounce, easeInOutBounce</div>\n\t\t</li>\n\t</ul>\n\t<h5>\n\t\t </h5>\n\t<h5>\n\t\tSpecial Classes within the Caption container</h5>\n\t<ul>\t\t<li>\t\t\t<strong>tp-scrollmedown</strong><br>\n\t\t\t<br>\n\t\t\tIf this class added to an element within the caption container, it will scroll the Body Position to under the current slider (used in Fullscreen slider only)<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>tp-resizeme</strong><br>\n\t\t\t<br>\n\t\t\tAdd class tp-resizeme to the container inside the caption and every item within (included the same container) will be responsive resized. Only needed if more than one depth exist in the container !<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>frontcorner, backcorner, frontcornertop, backcornertop</strong><br>\n\t\t\t<br>\n\t\t\tThis classes added without any content in a closed div i.e. <div class="frontcorner"></div> within the container. It will cut the left/right side of the caption background in 45° 1:1 <br>\n\t\t\t </li>\n\t</ul>\n\t<p>\t\t </p>\n</div>\n<p>\t </p>\n"},{"title": "Media in Slide","id": "media_in_slide","content": "<p>\tThe slider can play Vimeo, YouTube and HTML5 (videoJs) Videos, in boxed and "FullSlide" size. Via the Embeded API's the Slider will be paused, and restarted from the VideoPlayers. To use the Video Files in Slider see the following instructions.</p>\n<p>\tEach Video file has the same <strong>data- </strong>options like:</p>\n<ul>\t<li>\t\t<strong>autoplay</strong><br>\n\t\t<br>\n\t\tPossible Values: "true" / "false" - will play the Video Directly when slider has been loaded <br>\n\t\t </li>\n\t<li>\t\t<strong>nextslideatend</strong><br>\n\t\t<br>\n\t\tPossible Values: "true" / "false" after video come to the end position, it swaps to the next slide automatically.<br>\n\t\t </li>\n</ul>\n<p>\t </p>\n<h3>\n\tYouTube Video in Slide</h3>\n<p>\tBoxed version</p>\n<p>\tYouTube VIdeo will be added within a caption due an iframe. The Following example shows an iFrame embeded YouTube Video in a caption (460px X 259px), i.e.:</p>\n<pre class=\"html\">\n<div class="caption fade "\n data-autoplay="true"\n data-nextslideatend="false"\n data-x="130"\n data-y="70"\n data-speed="500"\n data-start="10"\n data-easing="easeOutBack">\n<iframe src="http://www.youtube.com/embed/YHWkro9-e9Q?hd=1&amp;wmode=opaque&amp;controls=1&amp;showinfo=0" width="460" height="259"></iframe>\n</div></pre>\n<div>\n\t<br>\n\tFullWidth Version (/i.e.)</div>\n<div>\n\t<pre class=\"html\">\n <div class="caption fade <strong>fullscreenvideo</strong>"\n data-autoplay="true"\n data-nextslideatend="true"\n data-x="0"\n data-y="0"\n data-speed="500"\n data-start="10"\n data-easing="easeOutBack">\n<iframe src="http://www.youtube.com/embed/YHWkro9-e9Q?hd=1&amp;wmode=opaque&amp;controls=1&amp;showinfo=0" width="100%" height="100%"></iframe>\n</div></pre>\n\t<div>\n\t\t </div>\n</div>\n<div>\n\t </div>\n<h3>\n\tVimeo Video</h3>\n<div>\n\t </div>\n<div>\n\tVimeo Video API works only Online. It will not work well on Localhost due some Sandbox Security reason. Please always test it Online.</div>\n<div>\n\t </div>\n<div>\n\tBoxed Version</div>\n<div>\n\t </div>\n<div>\n\t<pre class=\"html\">\n<div class="caption fade "\n data-autoplay="true"\n data-nextslideatend="false"\n data-x="190"\n data-y="110"\n data-speed="500"\n data-start="10"\n data-easing="easeOutBack">\n<iframe src="http://player.vimeo.com/video/29298709?title=0&amp;byline=0&amp;portrait=0;api=1" width="460" height="259"></iframe>\n</div></pre>\n\t<div>\n\t\t </div>\n</div>\n<div>\n\t </div>\n<div>\n\tFullWidth Version (i.e.)</div>\n<div>\n\t<pre class=\"html\">\n <div class="caption fade <strong>fullscreenvideo</strong>"\n data-autoplay="true"\n data-nextslideatend="true"\n data-x="0"\n data-y="0"\n data-speed="500"\n data-start="10"\n data-easing="easeOutBack">\n<iframe src="http://player.vimeo.com/video/29298709?title=0&amp;byline=0&amp;portrait=0;api=1" width="100%" height="100%"></iframe>\n</div></pre>\n\t<div>\n\t\t </div>\n</div>\n<h3>\n\tHTML5 Video (videoJS)</h3>\n<p>\tThe VideoJs Files are only loaded if the html5 video markup exist. Please do not forget to add the videoJsPath in the initialising Options ! </p>\n<p>\tBoxed Version (i.e.)</p>\n<pre class=\"html\">\n<div class="caption randomrotate "\n data-x="20"\n data-y="80"\n data-speed="300"\n data-start="2100"\n data-easing="easeOutExpo"\n data-autoplay="true"\n data-nextslideatend="false">\n\n<video class="video-js vjs-default-skin" controls preload="none" width="600" height="240"\n poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">\n\n <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />\n <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />\n <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />\n <track kind="captions" src="demo.captions.vtt" srclang="en" label="English" />\n</video>\n\n</div></pre>\n<div>\n\t </div>\n<div>\n\tFullWidth Version (i.e.)</div>\n<div>\n\t </div>\n<div>\n\t<pre class=\"html\">\n<div class="caption randomrotate <strong>fullscreenvideo</strong>"\n data-x="0"\n data-y="0"\n data-speed="300"\n data-start="2100"\n data-easing="easeOutExpo"\n data-autoplay="true"\n data-nextslideatend="true">\n\n<video class="video-js vjs-default-skin" controls preload="none" width="100%" height="100%"\n poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">\n\n <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />\n <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />\n <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />\n <track kind="captions" src="demo.captions.vtt" srclang="en" label="English" />\n</video>\n</div></pre>\n\t<div>\n\t\t </div>\n</div>\n<p>\t </p>\n"},{"title": "Banner Timer","id": "banner_timer","content": "<h3>\n\tBanner Timer</h3>\n<div>\n\t </div>\n<div>\n\tIn order to use a banner timer, you will need to add the markup within the banner or fullwidthbanner divs.</div>\n<div>\n\t<br>\n\tThe markup should look like :</div>\n<div>\n\t </div>\n<h5>\n\tTop Positioned Banner Timer:</h5>\n<pre class=\"html\">\n<div class="tp-bannertimer"></div><span class=\"Apple-tab-span\" style=\"white-space: pre;\"> </span></pre>\n<div>\n\t </div>\n<h5>\n\tBottom Positioned Banner Timer:</h5>\n<pre class=\"html\">\n<div class="tp-bannertimer tp-bottom"></div></pre>\n<div>\n\t </div>\n<div>\n\tTo remove this timer just simple remove the markup from the container, and that is it.</div>\n<div>\n\t </div>\n<div>\n\t </div>\n"},{"title": "Responsive Layouts","id": "responsive_layouts","content": "<h3>\n\tResponsive Layout</h3>\n<p>\tResponsive means that the slider will adjust to every screen width.</p>\n<div>\n\tTo achieve that you have to set a bunch of mediaqueries that will adjust the whole slider when a certain window size is used, or you will need to use our fullwidth style version, to let the banner always resize itself.</div>\n<div>\n\t </div>\n<div>\n\tThe basic containers are build like this ( in none Fullwidth, but 4 Level Responsive Version):</div>\n<div>\n\t </div>\n<div>\n\t<pre class=\"css\">\n .bannercontainer {\n padding:5px;\n background-color:#fff;\n width:890px;\n position:relative;\n margin-left:auto;\n margin-right:auto;\n}\n\n.banner{\n width:890px; // MUST BE THE SAME AS IN THE OPTIONS <strong>startwidth</strong> \n height:490px; // MUST BE THE SAME AS IN THE OPTIONS <strong>startheight</strong>\n position:relative;\n overflow:hidden;\n}\n</pre>\n\t<div>\n\t\t </div>\n\t<div>\n\t\t </div>\n\t<div>\n\t\tThe media queries that build the screen dependend container sizes:</div>\n\t<div>\n\t\t </div>\n\t<pre class=\"css\">\n@media only screen and (min-width: 768px) and (max-width: 959px) {\n .banner, .bannercontainer{ width:750px; height:412px;}\n .bannershadow {width:750px;}\n}\n\n@media only screen and (min-width: 480px) and (max-width: 767px) {\n .banner, .bannercontainer{width:470px; height:258px;} \n .bannershadow {width:470px;}\n}\n\n@media only screen and (min-width: 0px) and (max-width: 479px) {\n .banner, .bannercontainer{width:300px;height:165px;}\n .bannershadow {width:300px; margin-top:-5px;}\n}</pre>\n</div>\n<p>\t </p>\n<h5>\n\tCalculate the Resopnsive sizes</h5>\n<div>\n\t </div>\n<div>\n\tHere we can give you a short calculating example. The Width of the Responsive container depending on you in the different browser views. the height can be calculated via a simple example:</div>\n<div>\n\t </div>\n<div>\n\tnew width / original width * original height. So in our Examplce (step 1.) 750 / 890 * 490 == 413px</div>\n<div>\n\t </div>\n<div>\n\t </div>\n<h3>\n\tFullWidth Layout</h3>\n<div>\n\tThis slider can go fullwidth too. We have added an index-fullwidth.html example for you in the zip.</div>\n<div>\n\t </div>\n<div>\n\tPlease note the basic change in the markup.</div>\n<div>\n\t </div>\n<div>\n\tThe surrounding containers are (only example, can be called differently)</div>\n<div>\n\t </div>\n<div>\n\t<pre class=\"html\">\n<div class="fullwidthbanner-container">\n <div class="fullwidthbanner">...</div>\n</div></pre>\n\t<div>\n\t\t </div>\n\t<div>\n\t\t </div>\n\t<div>\n\t\tThe CSS is not splitted with Media-Queries but has a basic 100% value for width:</div>\n\t<div>\n\t\t </div>\n\t<pre class=\"css\">\n .fullwidthbanner-container{\n width:100% !important;\n position:relative;\n padding:0;\n max-height:450px !important; // Same value as in OPTIONS the <strong>startheight</strong> parameter\n overflow:hidden;\n}</pre>\n\t<div>\n\t\t </div>\n\t<h3>\n\t\tFullScreen Layout</h3>\n\t<p>\t\tYou can use the Slider also in FullScreen mode. It will need to have the possiblity to use the full width of the screen, means do not wrap it in any boxed container. For Fullscreen simple use the following markups and styles:</p>\n\t<p>\t\t </p>\n\t<p>\t\tThe markup could look like:</p>\n\t<pre class=\"html\">\n<div class="fullscreen-container">\n <div class="fullscreenbanner">\n </div>\n</div></pre>\n\t<div>\n\t\t </div>\n\t<p>\t\tThe Style has 100% width and height simple. </p>\n\t<pre class=\"css\">\n.fullscreen-container {\nwidth:100% !important;\nposition:relative;\npadding:0;\nheight:100%;\n}</pre>\n\t<div>\n\t\tDont forget to use the option fullScreen:"on" to use in the initialisation. If you wish to have an offset, which allows you to add i.e. a Menu over the fullscreen slider, just use the fullScreenOffsetContainer: option and set it to the container which wrapps the menu i.e</div>\n\t<div>\n\t\t </div>\n</div>\n<div>\n\t </div>\n"},{"title": "API Functions and Events","id": "api_functions_and_events","content": "<div>\n\tThe slider offers a public API which you can use to control component inside the Slider from within your own scripts. To access this api, use the following code.</div>\n<div>\n\t </div>\n<pre class=\"html\">\nvar tpj=jQuery;\ntpj.noConflict();\ntpj(document).ready(function() {\nif (tpj.fn.cssOriginal!=undefined)\n tpj.fn.css = tpj.fn.cssOriginal;\n var api = tpj('.banner').revolution(\n ....</pre>\n<div>\n\t </div>\n<div class=\"alert alert-info\">\n\tYou can see in the example index-responsive-API.html how to use the different functions, and how to get the trigered Events.</div>\n<div>\n\t </div>\n<div>\n\tOnce this is done you may use any of the following functions:</div>\n<div>\n\t </div>\n<ul>\t<li>\t\tapi.revpause() - Stops the Timer and autoplay</li>\n\t<li>\t\tapi.revresume() - Starts the Timer and resume to autoplay</li>\n\t<li>\t\tapi.revprev() - Change to previous slide</li>\n\t<li>\t\tapi.revnext() - Change to next slide</li>\n\t<li>\t\tapi.revshowslide(n) - Change to the slide with index Nr. (n)</li>\n\t<li>\t\tapi.revmaxslide() - Show the amount of slides</li>\n\t<li>\t\tapi.revscroll() - Scrollt Body under the Slide in FullScreen mode</li>\n</ul>\n<div>\n\t </div>\n<div>\n\tOr you may use any of the following Events:</div>\n<div>\n\t </div>\n<ul>\t<li>\t\trevolution.slide.onchange - Event is triggered when Slide has been rotated. data value will give you the current slide. i.e. <br>\n\t\t<br>\n\t\t<div>\n\t\t\tapi.bind("revolution.slide.onchange",function (e,data) {</div>\n\t\t<div>\n\t\t\t jQuery('#callbackinfo').html('Last Event: Slide Changed to '+data.slideIndex);</div>\n\t\t<div>\n\t\t\t});<br>\n\t\t\t </div>\n\t</li>\n\t<li>\t\trevolution.slide.onpause - Event is triggered when Slider is on Pause</li>\n\t<li>\t\trevolution.slide.onresume - Event is triggered when Slider is back from Pause</li>\n\t<li>\t\trevolution.slide.onvideoplay - Event is triggered when YouTube or Vimeo Video has been started (only Online Mode !)</li>\n\t<li>\t\trevolution.slide.onvideostop - Event is triggered when YouTube or Vimeo Video has been stopped or Slide has been rotated (only Online Mode !)</li>\n\t<li>\t\trevolution.slide.onstop - - Event is triggered when slider has been stopped due the Loop and stop at Slide parameters</li>\n\t<li>\t\trevolution.slide.onbeforeswap - - Event is triggered when slider is going to change to next slide</li>\n\t<li>\t\trevolution.slide.onafterswap - - Event is triggered when slider has finnishded the change of the transition (full transition finnished)</li>\n\t<li>\t\trevolution.slide.onloaded - - Event is triggered when slider is loaded and it is prepared</li>\n</ul>\n"},{"title": "Licenses","id": "licenses","content": "<p>\tUsed Assets</p>\n<ul>\t<li>\t\t<div>\n\t\t\tjQuery Transit - CSS3 transitions and transformations</div>\n\t\t<div>\n\t\t\t Copyright(c) 2011 Rico Sta. Cruz <rico@ricostacruz.com></div>\n\t\t<div>\n\t\t\t MIT Licensed.<br>\n\t\t\t </div>\n\t</li>\n\t<li>\t\t<div>\n\t\t\tjQuery WaitForImages 1.4<br>\n\t\t\t https://github.com/alexanderdickson/waitForImages<br>\n\t\t\tLicensed under the MIT licenses.</div>\n\t</li>\n</ul>\n<ul>\t<li>\t\tTemplate demo images licensed from <a href=\"http://us.fotolia.com\">Fotolia</a> for preview usage. Please do not attempt to rip the images from the preview!</li>\n</ul>\n<ul>\t<li>\t\t<a href=\"http://www.netcu.de/jquery-touchwipe-iphone-ipad-library\">Touch Wipe jQuery Plugin</a></li>\n</ul>\n<p>\t </p>\n"},{"title": "Support","id": "support","content": "<p>\tIf you face problems with the installation or customization of our product please do not hesitate to contact us via our support ticket system:</p>\n<p>\t<strong><a href=\"http://themepunch.ticksy.com\">http://themepunch.ticksy.com</a></strong></p>\n"}],"use_sub": false,"logo": "http://www.themepunch.com/codecanyon_wp/wp-content/uploads/2012/04/logo.png","favicon": "","customcss": "","easing": "easeOutQuart","easingduration": "913","bgimage": "http://www.themepunch.com/codecanyon_wp/wp-content/themes/config/images/website_bg_tile-21.gif","bgrepeat": "repeat","bgattachment": "scroll","bgcolor": "A8A7A7","textcolor": "363636","linkcolor": "830909","hrcolor1": "858484","hrcolor2": "CFCDCD","btncolor": "","btncolor1": "","btncolor2": "","sidebarbgimage": "","sidebarbgrepeat": "repeat","sidebarbgcolor": "363636","sidebartextcolor": "A8A7A7","sidebarlinkcolor": "A8A7A7","sidebaractivecolor": "404040","sidebaractivetextcolor": "B50D0D","sidebarhrcolor1": "242424","sidebarhrcolor2": "575757","cufon": "","documentationttype": "bootstrap","itemURL": "","sendJSON": "","sendZIP": "","sendPWD": ""}
|
Download
