Json

{"version": "2.
0","name": "Revolution Responsive jQuery Slider","subline": "","u

sername": "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 c
heckout http://themepunch.ticksy.com !","button_1_text": "","button_2_text": "",
"button_3_text": "","button_1_url": "","button_2_url": "","button_3_url": "","se
ctions": [{"title": "How to start","id": "how_to_start","content": "<p>\tThis ch
apter 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&n
bsp;</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 fo
llowing subfolders containing all of the items content:</p>\n<ul>\t<li>\t\tjs</l
i>\n\t<li>\t\tcss</li>\n\t<li>\t\tassets</li>\n</ul>\n<p>\tYou could use your ow
n jQuery but we recommend loading it directly from the Google ressources (see la
ter in this documentation).</p>\n<p>\tYou will find many <strong>examples</stron
g> in your downloaded zip under the <strong>examples&sources</strong> f
older.. </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 j
s 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=\"ht
ml\">\n\n<script type="text/java
script" src="rs-plugin/js/jquery.themepunch.plugins.min.js">&l
t;/script>\n<script type="text/javascript" src="rs-plugin/j
s/jquery.themepunch.revolution.min.js"></script>\n\n\n<link rel="stylesheet" type="
text/css" href="rs-plugin/css/settings.css" media="screen&qu
ot; />\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 fo
r 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, dif
ferent then here below ! )</div>\n\t<pre class=\"html\">\n<div class="ba
nnercontainer">\n<div class="banner">...</div>\n&l
t;/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&nbs
p;</div>\n\t<div>\n\t\t<h5>\n\t\t\tResponsive Style </h5>\n\t\t<p>\t\t\tThi
s Style allows you to creat predefined container sizes, undependent from sourrou
nding container, and create Medai Query (Browsr Size) Dependent responsive alter
antives.</p>\n\t\t<p>\t\t\tIt requests</p>\n\t\t<ul>\t\t\t<li>\t\t\t\ta containe
r with predefined Width and Height Attributes,</li>\n\t\t\t<li>\t\t\t\tMed
ia Query dependent Sizing. - this should be always with the same proportio
n. Means Width/Height should always have the same result !!!</li>\n\t\t</u
l>\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;\nwidt
h:960px;\nposition:relative;\nposition:relative;\nmargin-left:auto;\nmargin-righ
t:auto;\n}\n\n<strong>.banner</strong>{\nwidth:960px;\nheight:500px;\nposition:r
elative;\noverflow:hidden;\n}\n\n<strong>@media only screen and (min-width: 768p
x) and (max-width: 959px)</strong> {\n <span class=\"Apple-tab-span\" style=\"
white-space:pre\"> </span> .banner, .bannercontainer<span class=\"Apple-tab-spa
n\" style=\"white-space:pre\"> </span>{<span class=\"Apple-tab-span\" style=\"wh
ite-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)</st
rong> {\n
.banner, .bannercontainer<span class=\"Apple-tab-span\" style=\"w
hite-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\t
FullWidth Style</h5>\n\t\t<p>\t\t\tThis Style allows you to have the banner alwa
ys 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..&nb
sp;</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;\nposi
tion:relative;\npadding:0;\nmax-height:500px !important;\noverflow:hidden;\n}</p
re>\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 th
e 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 fullheigh
t 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% !impo
rtant;\nposition:relative;\npadding:0;\nheight:100%;\n}</pre>\n\t\t<h4>\n\t\t\t&
nbsp;</h4>\n\t\t<h4>\n\t\t\tCreate Your First Slides</h4>\n\t\t<p>\t\t\tCreate a
n 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\n\n <li data-transition="boxslide" data-slotamount=&q
uot;7" data-link="http://www.google.de"> \n <img src=&quo
t;images/slides/image1.jpg">\n <div class="caption sft big_whi
te" data-x="400" data-y="100" data-speed="700&quo
t; data-start="1700" data-easing="easeOutBack">KICKSTART
YOUR WEBSITE</div>\n <div class="caption sfb big_orange" d
ata-x="400" data-y="142" data-speed="500" data-sta
rt="1900" data-easing="easeOutBack">WITH SLIDER REVOLUTIO
N!</div>\n <div class="caption lfr medium_grey" data-x=&qu
ot;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 &
nbsp; tpj(document).ready(function() {\n     &nbsp
;if (tpj.fn.cssOriginal!=undefined)\n      tpj.fn.
css = tpj.fn.cssOriginal;\n      tpj('.fullscr
eenbanner').revolution({\n        &n
bsp;delay:9000,\n         startwidt
h:960,\n         startheight:500,\n
\n         onHoverStop:"on&quo
t;,\n\n         thumbWidth:100,\n&n
bsp;        thumbHeight:50,\n &nbsp
;       thumbAmount:3,\n\n   &
nbsp;     hideThumbs:0,\n\n    &nbs
p;    navigationType:"bullet",\n
      navigationArrows:"solo",\n &n
bsp;       navigationStyle:"round",
\n         navigationHAlign:"l
eft",\n         navigationVAli
gn:"bottom",\n         na
vigationHOffset:30,\n         navig
ationVOffset:30,\n\n         soloAr
rowLeftHalign:"left",\n       &nbsp
; soloArrowLeftValign:"center",\n     &n
bsp;   soloArrowLeftHOffset:20,\n     &n
bsp;   soloArrowLeftVOffset:0,\n\n     &
nbsp;   soloArrowRightHalign:"right",\n  &nbs
p;      soloArrowRightValign:"center",\n
         soloArrowRightHOffset:20,\
n         soloArrowRightVOffset:0,\
n\n         touchenabled:"on&q
uot;,\n\n         stopAtSlide:-1,\n
         stopAfterLoops:-1,\n
        hideCaptionAtLimit:0,\n &nb
sp;       hideAllCaptionAtLilmit:0,\n &n
bsp;       hideSliderAtLimit:0,\n\n &nbs
p;       fullWidth:"off",\n &n
bsp;       fullScreen:"off",\n&nbsp
;        fullScreenOffsetContainer:&quot
;#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": "Op
tions","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 de
lay 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 He
ight is the Max height of Slider in Fullwidth Layout and in Responsive Layout. &
nbsp;In Fullscreen Layout the Gird will be centered Vertically in case the Slide
r is higher then this value.<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>start
width </strong><br>\n\t\t\t<br>\n\t\t\tThis Height of the Grid where the Ca
ptions are displayed in Pixel. This Width is the Max Width of Slider in Responsi
ve 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>o
nHoverStop</strong><br>\n\t\t\t<br>\n\t\t\tPossible Values: "on", &quo
t;off" - Stop the Timer if mouse is hovering the Slider. Caption anim
ations 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 bas
ic. For Responsive Thumbs you will need to create media qury based thumb sizes.&
nbsp;<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 hi
de Thumbs. 1000- 100000 (ms) hide thumbs and navigation arrows, bullets af
ter 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\tPo
ssible values are: "bullet", "thumb", "none"
<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>navigationArrows</strong> Di
splay position of the Navigation Arrows (Default: "nexttobullets")<br>
\n\t\t\t<br>\n\t\t\tPossible values are "nexttobullets", "solo&qu
ot; <br>\n\t\t\tnexttobullets - arrows added next to the bullets left and r
ight<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> Loo
k 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&nbsp
;</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 / thumb
s (depending on which Style has been selected). Possible values navigation
HAlign: "left","center","right" and naigatio
nVAlign: "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, soloArrowRightHal
ign, solorArrowLeftHalign, soloArrowRightHalign</strong><br>\n\t\t\t<br>\n\t\t\t
Vertical and Horizontal Align of the Navigation Arrows (left and right independe
nt!) Possible values navigationHAlign: "left","center",&quot
;right" and naigationVAlign: "top","center",&quot
;bottom"<br>\n\t\t\t </li>\n\t\t<li>\t\t\t<strong>soloArrowLeftHOffset
, soloArrowLeftVOffset, </strong><strong>soloArrowRightHVOffset, soloArrowR
ightVOffset</strong><br>\n\t\t\t<br>\n\t\t\tThe Offset position of the navigatio
n 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&nb
sp;(Default: "on")<br>\n\t\t\t<br>\n\t\t\tPossible values: "on&qu
ot;, "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 st
ops 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 A
ll slides has been played "x" times. IT will stop at THe slide which i
s 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<s
trong>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 valu
e<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 Bro
wser 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\tPoss
ible Values: "on", "off" - defines if the fullwidth mo
de 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 o
f Fullheight will be increased with this Container height !<br>\n\t\t\t </l
i>\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&nbs
p;</li>\n\t\t<li>\t\t\t<strong>videoJsPath</strong><br>\n\t\t\t<br>\n\t\t\tThe P
ath 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<d
iv>\n\t<strong><li></strong> - Every list item represents a new Slide. To
Define Transitions, main links, etc. use the following <strong>data-</strong> va
lues 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 appear
ance 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<st
rong>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, slot
zoom-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, slideri
ght, slideup ,slidedown </div>\n\t\t<div>\n\t\t\tslidehorizontal, slidevert
ical</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></d
iv>\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\tT
he 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 transit
ion in "ms". default value is 300 (0.3 sec)<br>\n\t\t\t </d
iv>\n\t</li>\n\t<li>\t\t<strong>data-delay</strong> <br>\n\t\t<br>\n\t\tA n
ew Dealy value for the Slide. If no delay defined per slide, the dealy defined v
ia Options will be used<br>\n\t\t </li>\n</ul>\n<h5>\n\tLinks (Full Slide L
inks)</h5>\n<ul>\t<li>\t\t<strong>data-link</strong><br>\n\t\t<br>\n\t\tA link o
n the whole slide pic<br>\n\t\t </li>\n\t<li>\t\t<strong>data-target</stron
g><br>\n\t\t<br>\n\t\tThe target of the Link for the whole slide pic. (i.e. &quo
t;_blank", "_self")<br>\n\t\t </li>\n\t<li>\t\t<strong>dataslideindex</strong><br>\n\t\t<br>\n\t\tPossible values: next,back, 1-x (wh
ere x is the max. Amount of slide) If this value is set, click on slide will cal
l 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 wi
ll 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 fi
rst level. It can be a Simpe image, a colored or transparent image, or dummy ima
ge as lazy load version.</p>\n<h5>\n\tSimple Image</h5>\n<pre class=\"html\">\n&
lt;img src="images/slides/slide13.jpg" ></pre>\n<h5>\n\tColored Bac
kground Instead of Image</h5>\n<pre class=\"html\">\n<img src="images/sl
ides/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 ta
gs. Each Caption must be wrapped via a <div class="caption"&g
t;</div>.</p>\n\t<p>\t\tEach Caption has some special classes and some dat
a- 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" c
lass</strong><br>\n\t\t\t<br>\n\t\t\tIt is the Wrapping main Class which is a MU
ST. 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 o
f Styles in your own css file, to style your captions at the top level already<b
r>\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<d
iv>\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<s
trong>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 C
lasses:</em><br>\n\t\t\t\t<br>\n\t\t\t\t<div>\n\t\t\t\t\t<strong>stt</strong>&nb
sp;- Short to Top</div>\n\t\t\t\t<div>\n\t\t\t\t\t<strong>stb</strong> - Sh
ort 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 Le
ft</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 Deg
ree</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&nbsp
;</div>\n\t\t\t</div>\n\t\t</li>\n\t</ul>\n\t<h5>\n\t\tCaption data- settings</h
5>\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 capti
on will be siple aligned to the position. Any other "number" wil
l 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 o
f 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 Valu
es are "top", "center", "bottom", or any Value bet
ween -2500 and 2500. <br>\n\t\t\tIf top/center/bottom is set, the cap
tion will be siple aligned to the position. Any other "number" w
ill 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 sl
ider.<br>\n\t\t\tAt "center" the center of caption is aligned to the c
enter 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 w
orks if data-x set to left/center/right. It will move the Caption with the defin
ed "px" from the aligned position. i.e. data-x="cente
r" data-hoffset="-100" will put the caption 100px left from the s
lide center horizontaly. <br>\n\t\t\t </li>\n\t\t<li>\t\t\t<str
ong>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 th
e aligned position. i.e. data-x="center" data-hoffset=&quo
t;-100" will put the caption 100px left from the slide center vertica
lly. <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 Cap
tion in the Slide at the defined timepoint.<br>\n\t\t\t </li>\n\t\t<l
i>\t\t\t<strong>data-start</strong><br>\n\t\t\t<br>\n\t\t\tThe timepoint in mill
isecond 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 Ar
t how the caption is moved in to the slide (<strong>note!</strong> Animatio
n 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, easeOutCub
ic</div>\n\t\t\t<div>\n\t\t\t\teaseInOutCubic, easeInQuart, easeOutQuart, easeIn
OutQuart, 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, e
aseOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc</div>\n\t\t\t<
div>\n\t\t\t\teaseInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeO
utBack, easeInOutBack</div>\n\t\t\t<div>\n\t\t\t\teaseInBounce, easeOutBounce, e
aseInOutBounce<br>\n\t\t\t\t </div>\n\t\t</li>\n\t\t<li>\t\t\t<strong>dataendspeed</strong><br>\n\t\t\t<br>\n\t\t\tThe speed in milliseconds of the transi
tion 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 sli
de.<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 (<st
rong>note! </strong>Animation art set via Classes !). <br>\n\t\t\tPoss
ible 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\teaseInOutC
ubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint</div>\n\t\t\t<div>\
n\t\t\t\teaseOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine</d
iv>\n\t\t\t<div>\n\t\t\t\teaseInExpo, easeOutExpo, easeInOutExpo, easeInCirc, ea
seOutCirc, easeInOutCirc</div>\n\t\t\t<div>\n\t\t\t\teaseInElastic, easeOutElast
ic, 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 contain
er</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 scr
oll the Body Position to under the current slider (used in Fullscreen slider onl
y)<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 need
ed 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 contai
ner. 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&nb
sp;</p>\n"},{"title": "Media in Slide","id": "media_in_slide","content": "<p>\tT
he slider can play Vimeo, YouTube and HTML5 (videoJs) Videos, in boxed and &quot
;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- </s
trong>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<stro
ng>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 s
lide automatically.<br>\n\t\t </li>\n</ul>\n<p>\t </p>\n<h3>\n\tYouTub
e 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 Yo
uTube Video in a caption (460px X 259px), i.e.:</p>\n<pre class=\"html\">\n<d
iv class="caption fade "\n data-autoplay="true"\n data-n
extslideatend="false"\n data-x="130"\n data-y="70&q
uot;\n data-speed="500"\n data-start="10"\n data-easin
g="easeOutBack">\n<iframe src="http://www.youtube.com/embed
/YHWkro9-e9Q?hd=1&wmode=opaque&controls=1&showinfo=0&quo
t; 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>&quot
;\n
data-autoplay="true"\n
data-nextslideatend="true&quot
;\n
data-x="0"\n
data-y="0"\n
data-speed="5
00"\n
data-start="10"\n
data-easing="easeOutBack&quo
t;>\n<iframe src="http://www.youtube.com/embed/YHWkro9-e9Q?hd=1&a
mp;wmode=opaque&controls=1&showinfo=0" width="100%&quo
t; 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.</di
v>\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
datax="190"\n
data-y="110"\n
data-speed="500"\n
data-start="10"\n
data-easing="easeOutBack">\n<i
frame src="http://player.vimeo.com/video/29298709?title=0&byline=0&
amp;amp;portrait=0;api=1" width="460" height="259">&
lt;/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=\"htm

l\">\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&l
t;iframe src="http://player.vimeo.com/video/29298709?title=0&byline
=0&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 ht
ml5 video markup exist. Please do not forget to add the videoJsPath in the initi
alising 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&q
uot;\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" h
eight="240"\n poster="http://video-js.zencoder.com/oceans-clip.p
ng" data-setup="{}">\n\n <source src="http://video-j
s.zencoder.com/oceans-clip.mp4" type='video/mp4' />\n <sour
ce src="http://video-js.zencoder.com/oceans-clip.webm" type='video
/webm' />\n <source src="http://video-js.zencoder.com/oceans-cl
ip.ogv" type='video/ogg' />\n <track kind="captions&qu
ot; 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</stro
ng>"\n data-x="0"\n data-y="0"\n data-speed=&quot
;300"\n data-start="2100"\n data-easing="easeOutExpo&quo
t;\n data-autoplay="true"\n data-nextslideatend="true"&g
t;\n\n<video class="video-js vjs-default-skin" controls preload=&qu
ot;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" t
ype='video/mp4' />\n <source src="http://video-js.zencoder.
com/oceans-clip.webm" type='video/webm' />\n <source src=&q
uot;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": "Ba
nner 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 m
arkup should look like :</div>\n<div>\n\t </div>\n<h5>\n\tTop Positioned Ba
nner Timer:</h5>\n<pre class=\"html\">\n<div class="tp-bannertimer"
></div><span class=\"Apple-tab-span\" style=\"white-space: pre;\"> </sp
an></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 </d
iv>\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 cer
tain window size is used, or you will need to use our fullwidth style version, t
o let the banner always resize itself.</div>\n<div>\n\t </div>\n<div>\n\tTh
e basic containers are build like this ( in none Fullwidth, but 4 Level Responsi
ve Version):</div>\n<div>\n\t </div>\n<div>\n\t<pre class=\"css\">\n .banne
rcontainer {\n
padding:5px;\n
background-color:#fff;\n
width:890px;\n
position:relative;\n
margin-left:auto;\n
margin-right:auto;\n}\n\n.banne
r{\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>s
tartheight</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 queri
es 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 (maxwidth: 959px) {\n .banner, .bannercontainer{ width:750px; height:412px;}\n
.bannershadow {width:750px;}\n}\n\n@media only screen and (min-width: 480px) an
d (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&nbs
p;</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 Responsi
ve 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 widt
h / original width * original height. So in our Examplce (step 1.) 750 / 890 * 4
90 == 413px</div>\n<div>\n\t </div>\n<div>\n\t </div>\n<h3>\n\tFullWid
th Layout</h3>\n<div>\n\tThis slider can go fullwidth too. We have added an inde
x-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<d
iv>\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=&quot
;fullwidthbanner-container">\n <div class="fullwidthbanner&quo
t;>...</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:rel
ative;\n padding:0;\n max-height:450px !important; // Same value as in OPTI
ONS 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 us
e 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. &nbs
p;For Fullscreen simple use the following markups and styles:</p>\n\t<p>\t\t&nbs
p;</p>\n\t<p>\t\tThe markup could look like:</p>\n\t<pre class=\"html\">\n<di
v class="fullscreen-container">\n
<div class="fullscreen
banner">\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;\np
adding:0;\nheight:100%;\n}</pre>\n\t<div>\n\t\tDont forget to use the option ful
lScreen:"on" to use in the initialisation. If you wish to have a
n offset, which allows you to add i.e. a Menu over the fullscreen slider, just u
se 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 </d
iv>\n"},{"title": "API Functions and Events","id": "api_functions_and_events","c
ontent": "<div>\n\tThe slider offers a public API which you can use to control c
omponent 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.cssOri
ginal!=undefined)\n
tpj.fn.css = tpj.fn.cssOriginal;\n
var api = tpj('
.banner').revolution(\n
....</pre>\n<div>\n\t </div>\n<div class=\"a
lert alert-info\">\n\tYou can see in the example index-responsive-API.html how t
o 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 fun
ctions:</div>\n<div>\n\t </div>\n<ul>\t<li>\t\tapi.revpause() - Stops the T
imer 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. da
ta 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('La
st Event: Slide Changed to '+data.slideIndex);</div>\n\t\t<div>\n\t\t\t});<b
r>\n\t\t\t </div>\n\t</li>\n\t<li>\t\trevolution.slide.onpause - Event is t
riggered when Slider is on Pause</li>\n\t<li>\t\trevolution.slide.onresume - Eve
nt 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 (o
nly Online Mode !)</li>\n\t<li>\t\trevolution.slide.onvideostop - Event is trigg
ered when YouTube or Vimeo Video has been stopped or Slide has been rotated (onl
y 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 trans
ition finnished)</li>\n\t<li>\t\trevolution.slide.onloaded - - Event is triggere
d 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\tjQ
uery Transit - CSS3 transitions and transformations</div>\n\t\t<div>\n\t\t\t&nbs
p;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/alexanderdicks
on/waitForImages<br>\n\t\t\tLicensed under the MIT licenses.</div>\n\t</li>\n</u
l>\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 fr
om the preview!</li>\n</ul>\n<ul>\t<li>\t\t<a href=\"http://www.netcu.de/jquerytouchwipe-iphone-ipad-library\">Touch Wipe jQuery Plugin</a></li>\n</ul>\n<p>\t&
nbsp;</p>\n"},{"title": "Support","id": "support","content": "<p>\tIf you face p
roblems with the installation or customization of our product please do not hesi
tate to contact us via our support ticket system:</p>\n<p>\t<strong><a href=\"ht
tp://themepunch.ticksy.com\">http://themepunch.ticksy.com</a></strong></p>\n"}],
"use_sub": false,"logo": "http://www.themepunch.com/codecanyon_wp/wp-content/upl
oads/2012/04/logo.png","favicon": "","customcss": "","easing": "easeOutQuart","e
asingduration": "913","bgimage": "http://www.themepunch.com/codecanyon_wp/wp-con
tent/themes/config/images/website_bg_tile-21.gif","bgrepeat": "repeat","bgattach
ment": "scroll","bgcolor": "A8A7A7","textcolor": "363636","linkcolor": "830909",
"hrcolor1": "858484","hrcolor2": "CFCDCD","btncolor": "","btncolor1": "","btncol
or2": "","sidebarbgimage": "","sidebarbgrepeat": "repeat","sidebarbgcolor": "363
636","sidebartextcolor": "A8A7A7","sidebarlinkcolor": "A8A7A7","sidebaractivecol
or": "404040","sidebaractivetextcolor": "B50D0D","sidebarhrcolor1": "242424","si
debarhrcolor2": "575757","cufon": "","documentationttype": "bootstrap","itemURL"
: "","sendJSON": "","sendZIP": "","sendPWD": ""}

Json

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Json

Uploaded by

Copyright:

Available Formats

{"version": "2.

0","name": "Revolution Responsive jQuery Slider","subline": "","u

hite-space:pre\"> </span>{<span class=\"Apple-tab-span\" style=\"white-space:pre

ort to Bottom</div>\n\t\t\t\t<div>\n\t\t\t\t\t<strong>str</strong> - Short

ible Values are:<br>\n\t\t\t<div>\n\t\t\t\teaseOutBack, easeInQuad, easeOutQuad,

</div>\n<div>\n\tFullWidth Version (i.e.)</div>\n<div>\n\t<pre class=\"htm

may use any of the following Events:</div>\n<div>\n\t </div>\n<ul>\t<li>\t

You might also like

Json

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Json

Uploaded by

Copyright:

Available Formats

{"version": "2.

0","name": "Revolution Responsive jQuery Slider","subline": "","u

hite-space:pre\"> </span>{<span class=\"Apple-tab-span\" style=\"white-space:pre

ort to Bottom</div>\n\t\t\t\t<div>\n\t\t\t\t\t<strong>str</strong>&nbsp;- Short

ible Values are:<br>\n\t\t\t<div>\n\t\t\t\teaseOutBack, easeInQuad, easeOutQuad,

&nbsp;</div>\n<div>\n\tFullWidth Version (i.e.)</div>\n<div>\n\t<pre class=\"htm

may use any of the following Events:</div>\n<div>\n\t&nbsp;</div>\n<ul>\t<li>\t

You might also like

ort to Bottom</div>\n\t\t\t\t<div>\n\t\t\t\t\t<strong>str</strong> - Short

</div>\n<div>\n\tFullWidth Version (i.e.)</div>\n<div>\n\t<pre class=\"htm

may use any of the following Events:</div>\n<div>\n\t </div>\n<ul>\t<li>\t