{"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": "

\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.

\n

\t 

\n

\n\tWhat files do I need to upload to my server?

\n

\tPlease upload the rs-plugin folder to your server. In this folder you will find the following subfolders containing all of the items content:

\n\n

\tYou could use your own jQuery but we recommend loading it directly from the Google ressources (see later in this documentation).

\n

\tYou will find many examples in your downloaded zip under the examples&sources folder.. 

\n

\t 

\n

\n\tImplement the jQuery

\n

\tAdd the following lines to your HTML Head: 

\n
\n<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js>
\n

\t 

\n

\n\tAdd Revolution js and css files to your HTML page

\n
\n\t 
\n
\n\tAlso in the <HEAD> section:
\n
\n\t 
\n
\n\t
\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
\n\t
\n\t\t 
\n
\n
\n\tThis contains the JS and CSS for the Slider itself  and some helping modules .
\n
\n\t 
\n
\n\t 
\n
\n\t

\n\t\tCreate a Container for the Banner

\n\t
\n\t\t 
\n\t
\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 ! )
\n\t
\n<div class="bannercontainer">\n<div class="banner">...</div>\n</div>\n
\n\t
\n\t\tThe Banner-container can have different Styling depending on that, which layout you wish to use. 
\n\t
\n\t\t 
\n\t
\n\t\t
\n\t\t\tResponsive Style 
\n\t\t

\t\t\tThis Style allows you to creat predefined container sizes, undependent from sourrounding container, and create Medai Query (Browsr Size) Dependent responsive alterantives.

\n\t\t

\t\t\tIt requests

\n\t\t\n\t\t

\t\t\tPut this in your CSS File (i.e) :

\n\t\t
\n.bannercontainer {\npadding:0px;\nbackground-color:#fff;\nwidth:960px;\nposition:relative;\nposition:relative;\nmargin-left:auto;\nmargin-right:auto;\n}\n\n.banner{\nwidth:960px;\nheight:500px;\nposition:relative;\noverflow:hidden;\n}\n\n@media only screen and (min-width: 768px) and (max-width: 959px) {\n      .banner, .bannercontainer { width:760px; height:395px;}\n}\n\n\n@media only screen and (min-width: 480px) and (max-width: 767px) {\n      .banner, .bannercontainer { width:480px; height:250px; }\n}\n\n@media only screen and (min-width: 0px) and (max-width: 479px) {\n      .banner, .bannercontainer { width:320px;height:166px; }\n}
\n\t\t
\n\t\t\t 
\n\t\t
\n\t\t\tFullWidth Style
\n\t\t

\t\t\tThis Style allows you to have the banner always fit in the maximum width of the Sourrounding Container. 

\n\t\t

\t\t\tIt requests:

\n\t\t\n\t\t

\t\t\tPut this in your CSS File 

\n\t\t
\n.bannercontainer{\nwidth:100% !important;\nposition:relative;\npadding:0;\nmax-height:500px !important;\noverflow:hidden;\n}
\n\t
\n\t
\n\t\t

\n\t\t\t 

\n\t\t
\n\t\t\tFullScreen Style
\n\t\t

\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.

\n\t\t

\t\t\tIt requests:

\n\t\t\n\t\t

\t\t\tPut this in your CSS File

\n\t\t
\n.bannercontainer {\nwidth:100% !important;\nposition:relative;\npadding:0;\nheight:100%;\n}
\n\t\t

\n\t\t\t 

\n\t\t

\n\t\t\tCreate Your First Slides

\n\t\t

\t\t\tCreate an Unordered list inside the banner container where each <li> element will correspond to one slide.

\n\t\t

\t\t\t 

\n\t\t
\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>
\n\t\t
\n\t\t\t 
\n\t\t

\n\t\t\tCall the jQuery Plugin to build the Slider (Options need to be set of course...)

\n\t\t

\t\t\t 

\n\t\t
\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>
\n\t
\n
\n

\t 

\n"},{"title": "Options","id": "options","content": "

\n\tThe Options to Initialise the Plugin (Theme Sorted):

\n
\n\tGlobal Settings:
\n
\n\t\n\t
\n\t\tNavigation Settings:
\n\t\n\t\n\t
\n\t\tLoops
\n\t\n\t
\n\t\tMobile Visibility
\n\t\n\t
\n\t\t
\n\t\tLayout Styles
\n\t\n
\n

\t 

\n"},{"title": "Slides","id": "slides","content": "

\n\tSlide Options

\n
\n\t 
\n
\n\t<li> - Every list item represents a new Slide. To Define Transitions, main links, etc. use the following data- values per list item.
\n
\n\t 
\n
\n\tTransition Effects
\n\n
\n\tLinks (Full Slide Links)
\n\n
\n\tThumbnail
\n\n

\t 

\n

\n\tThe Main Image

\n

\t
\n\tEach Slide (<li> </li>) MUST 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.

\n
\n\tSimple Image
\n
\n<img src="images/slides/slide13.jpg" >
\n
\n\tColored Background Instead of Image
\n
\n<img src="images/slides/transparent.png" style="background-color:#56e34a" >
\n
\n\tLazy Loaded Image
\n
\n<img src="images/slides/dummy.jpg" data-lazyload="images/slides/slide13.jpg">
\n
\n\t 
\n
\n\t

\n\t\tThe Captions / Layers

\n\t

\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>.

\n\t

\t\tEach Caption has some special classes and some data- attributes, to set animation type, position, speed, easings etc.

\n\t
\n\t\tCaption Classes
\n\t\n\t
\n\t\tCaption data- settings
\n\t\n\t

\t\t 

\n\t\n\t
\n\t\t 
\n\t
\n\t\tSpecial Classes within the Caption container
\n\t\n\t

\t\t 

\n
\n

\t 

\n"},{"title": "Media in Slide","id": "media_in_slide","content": "

\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.

\n

\tEach Video file has the same data- options like:

\n\n

\t 

\n

\n\tYouTube Video in Slide

\n

\tBoxed version

\n

\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.:

\n
\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>
\n
\n\t
\n\tFullWidth Version (/i.e.)
\n
\n\t
\n <div class="caption fade fullscreenvideo"\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>
\n\t
\n\t\t 
\n
\n
\n\t 
\n

\n\tVimeo Video

\n
\n\t 
\n
\n\tVimeo Video API works only Online. It will not work well on Localhost due some Sandbox Security reason. Please always test it Online.
\n
\n\t 
\n
\n\tBoxed Version
\n
\n\t 
\n
\n\t
\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>
\n\t
\n\t\t 
\n
\n
\n\t 
\n
\n\tFullWidth Version (i.e.)
\n
\n\t
\n <div class="caption fade fullscreenvideo"\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>
\n\t
\n\t\t 
\n
\n

\n\tHTML5 Video (videoJS)

\n

\tThe VideoJs Files are only loaded if the html5 video markup exist. Please do not forget to add the videoJsPath in the initialising Options ! 

\n

\tBoxed Version (i.e.)

\n
\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>
\n
\n\t 
\n
\n\tFullWidth Version (i.e.)
\n
\n\t 
\n
\n\t
\n<div class="caption randomrotate fullscreenvideo"\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>
\n\t
\n\t\t 
\n
\n

\t 

\n"},{"title": "Banner Timer","id": "banner_timer","content": "

\n\tBanner Timer

\n
\n\t 
\n
\n\tIn order to use a banner timer, you will need to add the markup within the banner or fullwidthbanner divs.
\n
\n\t
\n\tThe markup should look like :
\n
\n\t 
\n
\n\tTop Positioned Banner Timer:
\n
\n<div class="tp-bannertimer"></div>
\n
\n\t 
\n
\n\tBottom Positioned Banner Timer:
\n
\n<div class="tp-bannertimer tp-bottom"></div>
\n
\n\t 
\n
\n\tTo remove this timer just simple remove the markup from the container, and that is it.
\n
\n\t 
\n
\n\t 
\n"},{"title": "Responsive Layouts","id": "responsive_layouts","content": "

\n\tResponsive Layout

\n

\tResponsive means that the slider will adjust to every screen width.

\n
\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.
\n
\n\t 
\n
\n\tThe basic containers are build like this ( in none Fullwidth, but 4 Level Responsive Version):
\n
\n\t 
\n
\n\t
\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 startwidth \n    height:490px;    // MUST BE THE SAME AS IN THE OPTIONS startheight\n    position:relative;\n    overflow:hidden;\n}\n
\n\t
\n\t\t 
\n\t
\n\t\t 
\n\t
\n\t\tThe media queries that build the screen dependend container sizes:
\n\t
\n\t\t 
\n\t
\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}
\n
\n

\t 

\n
\n\tCalculate the Resopnsive sizes
\n
\n\t 
\n
\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:
\n
\n\t 
\n
\n\tnew width / original width * original height. So in our Examplce (step 1.) 750 / 890 * 490 == 413px
\n
\n\t 
\n
\n\t 
\n

\n\tFullWidth Layout

\n
\n\tThis slider can go fullwidth too. We have added an index-fullwidth.html example for you in the zip.
\n
\n\t 
\n
\n\tPlease note the basic change in the markup.
\n
\n\t 
\n
\n\tThe surrounding containers are (only example, can be called differently)
\n
\n\t 
\n
\n\t
\n<div class="fullwidthbanner-container">\n   <div class="fullwidthbanner">...</div>\n</div>
\n\t
\n\t\t 
\n\t
\n\t\t 
\n\t
\n\t\tThe CSS is not splitted with Media-Queries but has a basic 100% value for width:
\n\t
\n\t\t 
\n\t
\n .fullwidthbanner-container{\n   width:100% !important;\n   position:relative;\n   padding:0;\n   max-height:450px !important;  // Same value as in OPTIONS the startheight parameter\n   overflow:hidden;\n}
\n\t
\n\t\t 
\n\t

\n\t\tFullScreen Layout

\n\t

\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:

\n\t

\t\t 

\n\t

\t\tThe markup could look like:

\n\t
\n<div class="fullscreen-container">\n    <div class="fullscreenbanner">\n    </div>\n</div>
\n\t
\n\t\t 
\n\t

\t\tThe Style has 100% width and height simple. 

\n\t
\n.fullscreen-container {\nwidth:100% !important;\nposition:relative;\npadding:0;\nheight:100%;\n}
\n\t
\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
\n\t
\n\t\t 
\n
\n
\n\t 
\n"},{"title": "API Functions and Events","id": "api_functions_and_events","content": "
\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.
\n
\n\t 
\n
\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    ....
\n
\n\t 
\n
\n\tYou can see in the example index-responsive-API.html how to use the different functions, and how to get the trigered Events.
\n
\n\t 
\n
\n\tOnce this is done you may use any of the following functions:
\n
\n\t 
\n\n
\n\t 
\n
\n\tOr you may use any of the following Events:
\n
\n\t 
\n\n"},{"title": "Licenses","id": "licenses","content": "

\tUsed Assets

\n\n\n\n

\t 

\n"},{"title": "Support","id": "support","content": "

\tIf you face problems with the installation or customization of our product please do not hesitate to contact us via our support ticket system:

\n

\thttp://themepunch.ticksy.com

\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": ""}