953 lines
44 KiB
HTML
953 lines
44 KiB
HTML
<!doctype html>
|
|
<!--[if IE 6 ]><html lang="en-us" class="ie6"> <![endif]-->
|
|
<!--[if IE 7 ]><html lang="en-us" class="ie7"> <![endif]-->
|
|
<!--[if IE 8 ]><html lang="en-us" class="ie8"> <![endif]-->
|
|
<!--[if (gt IE 7)|!(IE)]><!-->
|
|
<html lang="en-us"><!--<![endif]-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
|
|
<title>Revolution Responsive jQuery Slider - The Documentation</title>
|
|
|
|
<meta name="description" content="For support please checkout http://themepunch.ticksy.com !">
|
|
<meta name="author" content="ThemePunch">
|
|
<meta name="copyright" content="ThemePunch">
|
|
<meta name="generator" content="Documenter v1.6 http://rxa.li/documenter">
|
|
<meta name="date" content="2012-06-28T00:00:00+02:00">
|
|
|
|
<link rel="stylesheet" href="css/documenter_style.css" media="all">
|
|
|
|
|
|
<script src="js/jquery.1.6.4.js"></script>
|
|
|
|
<script src="js/jquery.scrollTo-1.4.2-min.js"></script>
|
|
<script src="js/jquery.easing.js"></script>
|
|
|
|
<link rel="stylesheet" href="css/shDocumenter.css" media="screen">
|
|
<script src="js/shCore.js"></script>
|
|
<script src="js/shBrushCss.js"></script>
|
|
<script src="js/shBrushXml.js"></script>
|
|
<script src="js/shBrushJScript.js"></script>
|
|
<script>SyntaxHighlighter.defaults['toolbar'] = false;SyntaxHighlighter.all();</script>
|
|
|
|
<script>document.createElement('section');var duration=913,easing='easeOutQuart';</script>
|
|
<script src="js/script.js"></script>
|
|
|
|
<style>
|
|
html{background-color:#A8A7A7;color:#363636;background-image:url(assets/images/image_2.gif);background-repeat:repeat;background-attachment:scroll;}
|
|
::-moz-selection{background:#404040;color:#B50D0D;}
|
|
::selection{background:#404040;color:#B50D0D;}
|
|
#documenter_sidebar #documenter_logo{background-image:url(assets/images/image_3.png);}
|
|
a{color:#830909;}
|
|
hr{border-top:1px solid #858484;border-bottom:1px solid #CFCDCD;}
|
|
#documenter_sidebar, #documenter_sidebar ol a{background-color:#363636;color:#A8A7A7;}
|
|
#documenter_sidebar ol a{-webkit-text-shadow:1px 1px 0px #575757;-moz-text-shadow:1px 1px 0px #575757;text-shadow:1px 1px 0px #575757;}
|
|
#documenter_sidebar ol{border-top:1px solid #242424;}
|
|
#documenter_sidebar ol a{border-top:1px solid #575757;border-bottom:1px solid #242424;color:#A8A7A7;}
|
|
#documenter_sidebar ol a:hover{background:#404040;color:#B50D0D;border-top:1px solid #404040;}
|
|
#documenter_sidebar ol a.current{background:#404040;color:#B50D0D;border-top:1px solid #404040;}
|
|
#documenter_copyright{display:block !important;visibility:visible !important;}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="documenter_sidebar">
|
|
<a href="#documenter_cover" id="documenter_logo"></a>
|
|
<ol id="documenter_nav">
|
|
<li><a class="current" href="#documenter_cover">Start</a></li>
|
|
<li><a href="#install">Install</a></li>
|
|
<li><a href="#markup">Markup</a></li>
|
|
<li><a href="#layout">Layout</a></li>
|
|
<li><a href="#responsive_basic">Responsive Basic</a></li>
|
|
<li><a href="#fullwidth">Fullwidth</a></li>
|
|
<li><a href="#publicapi">Public Api</a></li>
|
|
<li><a href="#licenses">Licenses</a></li>
|
|
<li><a href="#support">Support</a></li>
|
|
|
|
</ol>
|
|
<div id="documenter_copyright">Copyright ThemePunch 2012<br>
|
|
made with the <a href="http://rxa.li/documenter">Documenter v1.6</a>
|
|
</div>
|
|
</div>
|
|
<div id="documenter_content">
|
|
<section id="documenter_cover"><h1>Revolution Responsive jQuery Slider</h1><h2>The Documentation</h2><hr><ul><li>Created: 06/22/2012</li><li>latest Update: 05/11/2012</li><li>By: ThemePunch</li><li><a href="http://www.codecanyon.com/user/themepunch?ref=themepunch">www.codecanyon.com/user/themepunch</a></li><li>Email: <a href="mailto:info@themepunch.com">info@themepunch.com</a></li></ul><p>For support please checkout http://themepunch.ticksy.com !</p></section><section id="install">
|
|
<h3>Install</h3><hr class="notop">
|
|
<p>
|
|
This 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>
|
|
<p>
|
|
</p>
|
|
<h4>
|
|
00 What files do I need to upload to my server?</h4>
|
|
<p>
|
|
Please upload the rs-plugin folder to your server. In this folder you will find the following subfolders containing all of the items content:</p>
|
|
<ul>
|
|
<li>
|
|
js</li>
|
|
<li>
|
|
css</li>
|
|
<li>
|
|
assets</li>
|
|
</ul>
|
|
<p>
|
|
You could use your own jQuery but we recommend loading it directly from the Google ressources (see later in this documentation).</p>
|
|
<p>
|
|
You will find an <strong>example</strong> <strong>index.html and index-fullwidth.html</strong> in your downloaded zip. </p>
|
|
<h4>
|
|
01 Implement the jQuery</h4>
|
|
<p>
|
|
Add the following lines to your HTML Head: </p>
|
|
<pre class="brush: js">
|
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js></pre>
|
|
<p>
|
|
</p>
|
|
<h3>
|
|
</h3>
|
|
<h4>
|
|
02 Add Revolution js and css files to your HTML page</h4>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
Also in the <HEAD> section:</div>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
<pre class="brush: html">
|
|
<!-- jQuery REVOLUTION Slider -->
|
|
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
|
|
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
|
|
|
|
<!-- REVOLUTION BANNER CSS SETTINGS -->
|
|
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
|
|
</pre>
|
|
<div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
This contains the JS and CSS for the Slider itself and some helping modules .</div>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
<h4>
|
|
03 A Create the surrounding DIV for your Slider (Responsive, none Full Width)</h4>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
Put it in the HTML:</div>
|
|
<div>
|
|
</div>
|
|
<pre class="brush: html">
|
|
<div class="banner-container">
|
|
|
|
<div class="banner">...</div>
|
|
|
|
</div>
|
|
</pre>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
<h4>
|
|
03 B Create the surrounding DIV for your Slider (Responsive, Full Width Slider)</h4>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
Put it in the HTML:</div>
|
|
<div>
|
|
</div>
|
|
<pre class="brush: html">
|
|
<div class="fullwidthbanner-container">
|
|
|
|
<div class="fullwidthbanner">...</div>
|
|
|
|
</div>
|
|
|
|
</pre>
|
|
<div>
|
|
</div>
|
|
<h4>
|
|
</h4>
|
|
</div>
|
|
<div>
|
|
<h4>
|
|
04 Put an unordered list inside to hold the different slides as list elements</h4>
|
|
<p>
|
|
</p>
|
|
<pre class="brush: html">
|
|
<ul>
|
|
<!-- THE BOXSLIDE EFFECT EXAMPLES WITH LINK ON THE MAIN SLIDE EXAMPLE -->
|
|
|
|
<li data-transition="boxslide" data-slotamount="7" data-link="http://www.google.de">
|
|
<img src="images/slides/image1.jpg">
|
|
<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>
|
|
<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>
|
|
<div class="caption lfr medium_grey" data-x="510" data-y="210" data-speed="300" data-start="2000">UNLIMITED TRANSITIONS</div>
|
|
</li>
|
|
...
|
|
</ul></pre>
|
|
<div>
|
|
</div>
|
|
<h4>
|
|
05 Call the jQuery Plugin to build the Slider</h4>
|
|
<p>
|
|
</p>
|
|
<pre class="brush: js">
|
|
<script type="text/javascript">
|
|
var tpj=jQuery; // MAKE JQUERY PLUGIN CONFLICTFREE
|
|
tpj.noConflict();
|
|
|
|
tpj(document).ready(function() {
|
|
|
|
if (tpj.fn.cssOriginal!=undefined) // CHECK IF fn.css already extended
|
|
tpj.fn.css = tpj.fn.cssOriginal;
|
|
|
|
tpj('.banner').revolution(
|
|
{
|
|
delay:9000,
|
|
startheight:490,
|
|
startwidth:890,
|
|
|
|
hideThumbs:200,
|
|
|
|
thumbWidth:100,
|
|
thumbHeight:50,
|
|
thumbAmount:5,
|
|
|
|
navigationType:"bullet",
|
|
navigationArrows:"nexttobullets",
|
|
navigationStyle:"round",
|
|
|
|
navigationHAlign:"center",
|
|
navigationVAlign:"bottom",
|
|
navigationHOffset:0,
|
|
navigationVOffset:20,
|
|
|
|
soloArrowLeftHalign:"left",
|
|
soloArrowLeftValign:"center",
|
|
soloArrowLeftHOffset:20,
|
|
soloArrowLeftVOffset:0,
|
|
|
|
soloArrowRightHalign:"right",
|
|
soloArrowRightValign:"center",
|
|
soloArrowRightHOffset:20,
|
|
soloArrowRightVOffset:0,
|
|
touchenabled:"on",
|
|
onHoverStop:"on",
|
|
|
|
navOffsetHorizontal:0,
|
|
navOffsetVertical:20,
|
|
|
|
hideCaptionAtLimit:0,
|
|
hideAllCaptionAtLilmit:0,
|
|
hideSliderAtLimit:0,
|
|
|
|
stopAtSlide:-1,
|
|
stopAfterLoops:-1,
|
|
|
|
shadow:1,
|
|
fullWidth:"off"
|
|
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<p>
|
|
</p>
|
|
</section>
|
|
<section id="markup">
|
|
<h3>Markup</h3><hr class="notop">
|
|
<p> The items markup uses javascript/jQuery to transform a block of HTML markup into the slider, all customization is done trough the use of HTML5 data attributes and CSS. The markup is valid for HTML5 rules and the content will be fully indexed by search engines. The general structure of markup follows this schema:</p>
|
|
<p> </p>
|
|
<h4>
|
|
01 Two surrounding DIVs are the basic holder for your Slider:</h4>
|
|
<div>
|
|
Put it in the HTML for Responsive but none <strong>FullWidth</strong> version:</div>
|
|
<div>
|
|
</div>
|
|
<pre class="brush: html">
|
|
<div id="banner_container">
|
|
<div id="banner" >...</div>
|
|
</div>
|
|
</pre>
|
|
<div>
|
|
<div>
|
|
Put it in the HTML for <strong>Responsive</strong> version:</div>
|
|
<div>
|
|
</div>
|
|
<pre class="brush: html">
|
|
<div id="fullwidthbanner-container">
|
|
<div id="fullwidthbanner" >...</div>
|
|
</div>
|
|
|
|
</pre>
|
|
<div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
The outside container could be used by one of your divs in your page and is needed for the responsive part.<br>
|
|
To get more know about the fullwidth and/or responsive containers, see our style.css examples.</div>
|
|
<div>
|
|
</div>
|
|
<h4>
|
|
02 An unordered list inside holds the different slides as list elements</h4>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
<pre class="brush: html">
|
|
<ul>
|
|
<!-- THE BOXSLIDE EFFECT EXAMPLES WITH LINK ON THE MAIN SLIDE EXAMPLE -->
|
|
|
|
<li data-transition="flyin" data-slotamount="5" data-thumb="images/thumbs/regular_thumb1.jpg">
|
|
<img src="images/slides/newslide1.jpg">
|
|
|
|
<div class="caption randomrotate fadeout medium_grey"
|
|
data-x="40" data-y="20"
|
|
data-speed="900" data-start="1900" data-easing="easeOutBack"
|
|
data-linktoslide="4">jump slide 4</div>
|
|
|
|
<div class="caption randomrotate fadeout medium_grey"
|
|
data-x="40" data-y="50"
|
|
data-speed="900" data-start="2100" data-easing="easeOutBack"
|
|
data-linktoslide="prev">prev slide</div>
|
|
|
|
<div class="caption randomrotate fadeout medium_grey"
|
|
data-x="40" data-y="80"
|
|
data-speed="900" data-start="2100" data-easing="easeOutBack"
|
|
data-linktoslide="next">next slide</div>
|
|
|
|
<div class="caption lfr randomrotateout big_white"
|
|
data-x="400" data-y="80"
|
|
data-speed="900" data-start="1700" data-easing="easeOutBack"
|
|
data-end="3300" data-endspeed="1000" data-endeasing="easeInOutBack"
|
|
data-linktoslide="4">Kickstart Your Website</div>
|
|
|
|
<div class="caption lfb big_orange"
|
|
data-x="400" data-y="80"
|
|
data-speed="1500" data-start="3000" data-easing="easeOutBack">
|
|
Some Caption Here</div>
|
|
|
|
</li>
|
|
...
|
|
</ul></pre>
|
|
</div>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
The next chapter describes the inner of this list elements.</div>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
The more advanced users will have no problems in customizing the slider up to every detail and create their own sliders with using the CSS files.</div>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
The CSS file responsible for the layout of your slider is the settings.css. Find All Responsive Settings and Docu later in "Responsive Captions".</div>
|
|
</section>
|
|
<section id="layout">
|
|
<h3>Layout</h3><hr class="notop">
|
|
<h4>
|
|
01 The Default parameters of the Plugin</h4>
|
|
<div>
|
|
<ul>
|
|
<li>
|
|
<strong>delay</strong> The time one slide stays on the screen in Milliseconds (Default: 9000)</li>
|
|
<li>
|
|
<strong>startheight </strong>Basic Height of the Slider in the desktop resolution in pixel, other screen sizes will be calculated from this (Default: 490) It should be similiar to the settings of the style sheet. If you use a fullwidth banner, ti will deinfe the max. Height of the banner by resizing of the browser. The banner wont ne heigher than this value.</li>
|
|
<li>
|
|
<strong>startwidth </strong>Basic Width of the Slider in the desktop resolution in pixel, other screen sizes will be calculated from this (Default: 890) It should be similiar to the settings of the style sheet. If you use a fullwidth banner, ti will deinfe the max. Width of the banner by resizing of the browser.</li>
|
|
<li>
|
|
<strong>hideThumbs </strong>Time after that the Thumbs will be hidden(Default: 200),</li>
|
|
<li>
|
|
<strong>navigationType</strong> Display type of the navigation bar (Default:"none")<br>
|
|
Options:<br>
|
|
bullet<br>
|
|
thumb ** In Fullwidth version thumbs wont be displayed if navigation offset set to shwop thumbs outside of the container ! Thumbs must be showen in the container!<br>
|
|
none</li>
|
|
<li>
|
|
<strong>navigationArrows</strong> Display position of the Navigation Arrows (Default: "nexttobullets")<br>
|
|
Options:<br>
|
|
nexttobullets<br>
|
|
verticalcentered changed to <strong>solo</strong> ** By navigation Type Thumb arrows position can be set via further options below<br>
|
|
none</li>
|
|
<li>
|
|
<strong>navigationStyle</strong> Look of the navigation bullets (Default: "round")<br>
|
|
Options:<br>
|
|
round<br>
|
|
navbar<br>
|
|
round-old<br>
|
|
square-old<br>
|
|
navbar-old ** If you choose navbar-old, we recommend to choose Navigation Arrows to nexttobullets</li>
|
|
<li>
|
|
<strong>navigationHAlign</strong> options: left,center,right - Horizontal Align of Bullets / Thumbnails</li>
|
|
<li>
|
|
<strong>navigationVAlign</strong> options: top,center,bottom - Vertical Align of Bullets / Thumbnails</li>
|
|
<li>
|
|
<strong>navigationHOffset</strong> a value between -600 to 600 - Offset from current Horizontal position of Bullets / Thumbnails negative and positive direction</li>
|
|
<li>
|
|
<strong>navigationVOffset</strong> a value between -600 to 600 - Offset from current Vertical position of Bullets / Thumbnails negative and positive direction</li>
|
|
<br>
|
|
<li>
|
|
<strong>soloArrowLeftHalign</strong> options: left,center,right - Horizontal Align of left Arrow (only if arrow is not next to bullets)</li>
|
|
<li>
|
|
<strong>soloArrowLeftValign</strong> options: top,center,bottom - Vertical Align of left Arrow (only if arrow is not next to bullets)</li>
|
|
<li>
|
|
<strong>soloArrowLeftHOffset</strong> a value between -600 to 600 - Offset from current Horizontal position of of left Arrow negative and positive direction</li>
|
|
<li>
|
|
<strong>soloArrowLeftVOffset</strong> a value between -600 to 600 - Offset from current Vertical position of of left Arrow negative and positive direction</li>
|
|
<br>
|
|
<li>
|
|
<strong>soloArrowRightHalign</strong> left,center,right - Horizontal Align of right Arrow (only if arrow is not next to bullets)</li>
|
|
<li>
|
|
<strong>soloArrowRightValign</strong> top,center,bottom - Vertical Align of right Arrow (only if arrow is not next to bullets)</li>
|
|
<li>
|
|
<strong>soloArrowRightHOffset</strong> a value between -600 to 600 - Offset from current Horizontal position of right Arrow negative and positive direction</li>
|
|
<li>
|
|
<strong>soloArrowRightVOffset</strong> a value between -600 to 600 - Offset from current Vertical position of right Arrow negative and positive direction</li>
|
|
<li>
|
|
<strong>navOffsetHorizontal </strong>The Bar is centered but could be moved this pixel count left(e.g. -10) or right (Default:<strong> </strong>0) ** By resizing the banner, it will be always centered !!</li>
|
|
<li>
|
|
<strong>navOffsetVertical</strong> The Bar is bound to the bottom but could be moved this pixel count up (e. g. -20) or down (Default: 20)</li>
|
|
<br>
|
|
<li><strong>touchenabled</strong> Enable Swipe Function on touch devices (Default: "on")<br>
|
|
Options:<br>
|
|
on<br>
|
|
off</li>
|
|
<li>
|
|
<strong>shadow</strong> The Shadow display underneath the banner<br>
|
|
Options:<br>
|
|
0 No Shadow<br>
|
|
1<br>
|
|
2<br>
|
|
3</li>
|
|
<li>
|
|
<strong>onHoverStop</strong> Stop the Timer when hovering the slider<br>
|
|
Options:<br>
|
|
on<br>
|
|
off</li>
|
|
<li>
|
|
<strong>thumbWidth</strong> the basic Width of one Thumbnail (only if thumb is selected. Default:100)</li>
|
|
<li>
|
|
<strong>thumbHeight</strong> the basic Height of one Thumbnail (only if thumb is selected Default 50)</li>
|
|
<li>
|
|
<strong>thumbAmount</strong> the amount of the Thumbs visible same time (only if thumb is selected)<br>
|
|
** All Thumbs will be hidden in smallest Responsive Level, and in smaller level default size is reseted to 60x30px. Can be modificated in the settings.css file)</li>
|
|
<li>
|
|
<strong>hideCaptionAtLimit</strong> It Defines if a caption should be shown under a Width Limit ( Basod on The Width of Banner ! ) You need to define the captions which should be shown seperately with data-captionhidden="on/off" </li>
|
|
<li>
|
|
<strong>hideAllCaptionAtLilmit</strong> Hide all The Captions if Width of Browser is less then this value</li>
|
|
<li>
|
|
<strong>hideSliderAtLimit</strong> under this Limit the Slider is hidden and the timer is stopped</li>
|
|
<li>
|
|
<strong>fullWidth</strong> on/off It turns on the Horizontal Centering of Images in FullWidth version. In Case the Image is bigger then the container width, it fits the image with its height in the container and centers horizontally.</li>
|
|
<li>
|
|
<strong>stopAtSlide</strong> -1 or 1 to 999. Stop at selected Slide Number. If set to -1 it will loop without stopping. Only available if stopAfterLoops is not equal -1 !</li>
|
|
<li>
|
|
<strong>stopAfterLoops</strong> -1 or 0 to 999. Stop at selected Slide Number (stopAtSlide) after slide looped "x" time, where x this Number. If set to -1 it will loop without stopping. Only available if stopAtSlide not equal -1 ! </li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
</div>
|
|
<h4>
|
|
02 Slider items</h4>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
<strong><li></strong> - Every list item represents a new banner/slider item.</div>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
Transition effects and a possible slide link are defined here:</div>
|
|
<ul>
|
|
<li>
|
|
<strong>data-transition </strong>The appearance transition of this slide<br>
|
|
Options: <br>
|
|
boxslide<br>
|
|
boxfade<br>
|
|
slotzoom-horizontal<br>
|
|
slotslide-horizontal<br>
|
|
slotfade-horizontal<br>
|
|
slotzoom-vertical<br>
|
|
slotslide-vertical<br>
|
|
slotfade-vertical<br>
|
|
curtain-1<br>
|
|
curtain-2<br>
|
|
curtain-3<br>
|
|
slideleft<br>
|
|
slideright<br>
|
|
slideup<br>
|
|
slidedown<br>
|
|
fade<br>
|
|
random<br>
|
|
slidehorizontal<br>
|
|
slidevertical<br>
|
|
papercut<br>
|
|
flyin<br>
|
|
turnoff<br>
|
|
cube<br>
|
|
3dcurtain-vertical<br>
|
|
3dcurtain-horizontal<br>
|
|
</li>
|
|
|
|
<li>
|
|
<strong>data-masterspeed</strong> Set the Speed of the Slide Transition. Default 300, min:100 max:2000.</li>
|
|
|
|
<li>
|
|
<strong>data-slotamount</strong> The number of slots or boxes the slide is divided into. If you use boxfade, over 7 slots can be juggy.</li>
|
|
<li>
|
|
<strong>data-link</strong> A link on the whole slide pic</li>
|
|
<li>
|
|
<strong>data-target</strong> A link target (like _self or _blank)</li>
|
|
<li>
|
|
<strong>data-linktoslide</strong> If data-link="slide" is set, you can define a slide where to jump in case the image has been clicked.</li>
|
|
<li>
|
|
<strong>data-delay</strong> A new Dealy value for the Slide. If no delay defined per slide, the dealy defined via Options will be used</li>
|
|
<li>
|
|
<strong>data-thumb</strong> An Alternative Source for thumbs. If not defined a copy of the background image will be used in resized form</li>
|
|
<li>
|
|
<strong>data-fstransition</strong> An Alternaive First Slide Transition (only in the first loop, than data-transition will be used)</li>
|
|
<li>
|
|
<strong>data-fsmasterspeed</strong> An Alternaive First Slide Transition Speed (only in the first loop, than data-masterspeed will be used)</li>
|
|
<li>
|
|
<strong>data-fsslotamount</strong> An Alternaive First Slide Slout Amoun (only in the first loop, than data-slotamoun will be used)</li>
|
|
|
|
|
|
</ul>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
Each List item must include:</div>
|
|
<ul>
|
|
<li>
|
|
an image <img> as Background Image / Main Image with Data of the thumb<br>
|
|
OR</li>
|
|
<li>
|
|
a colored background image AND a coloredbg caption which is full width/height defined !!<br>
|
|
<div>
|
|
<pre class="brush: html">
|
|
<img src="images/slides/coloredbg.png" data-fullwidthcentering="off">
|
|
<div class="caption coloredbg fade" data-x="0" data-y="0" data-speed="10" data-start="0" style="background-color:#ff9118; width:100%;height:100%"></div>
|
|
|
|
</pre>
|
|
</div>
|
|
<div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
Each List item can include:</p>
|
|
<ul>
|
|
<li>
|
|
some <div>s containing captions (class="caption"), this could contain embedded video iframes also</li>
|
|
</ul>
|
|
<div>
|
|
<pre class="brush: html">
|
|
<li data-transition="boxslide" data-slotamount="7" data-link="http://www.google.de">
|
|
<img src="images/slides/image1.jpg" data-fullwidthcentering="off">
|
|
<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>
|
|
<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>
|
|
<div class="caption lfr medium_grey" data-x="510" data-y="210" data-speed="300" data-start="2000">UNLIMITED TRANSITIONS</div>
|
|
</li>
|
|
</pre>
|
|
</div>
|
|
<div>
|
|
</div>
|
|
<h4>
|
|
Fulwidth Image Vertical Centering</h4>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
Basically Fullwidth Slider will Align main images to the top and centering horizontally. If Vertically Centering is requested, use the <strong>data-fullwidthcentering</strong> per <img> Possible valuse are <strong>"on"</strong> or <strong>"off"</strong></div>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
|
|
<h4>
|
|
03 Captions</h4>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
Captions are Containers which can be customized via CSS, classes for the start animation and some data options.</div>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
The CSS for the caption added in the settings.css file because it depends strongly on the responsive Sizing. </div>
|
|
<div>
|
|
There are 4 Steps of Responsive Contents which are written later below under the Responsive Dependencies Caption.</div>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
You find an example in the settings.css of our item download.</div>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
The options are in detail:</div>
|
|
<ul>
|
|
<li>
|
|
color <strong>class</strong> example big_white, big_orange, medium_grey (check the settings.css of the example for details)</li>
|
|
<br>
|
|
<li>
|
|
Class for<strong> Incoming Animations</strong><br>
|
|
Options:<br>
|
|
sft - Short from Top<br>
|
|
sfb - Short from Bottom<br>
|
|
sfr - Short from Right<br>
|
|
sfl - Short from Left<br>
|
|
lft - Long from Top<br>
|
|
lfb - Long from Bottom<br>
|
|
lfr - Long from Right<br>
|
|
lfl - Long from Left<br>
|
|
fade - fading<br>
|
|
randomrotate- Fade in, Rotate from a Random position and Degree<br>
|
|
</li>
|
|
<br>
|
|
<li>
|
|
Class for <strong>Outgoing Animations</strong> (only during the Slide).<br>This is Optional. If not set, but endtime is set via data-end than the same animation type will be used as for incoming animation.<br>
|
|
Options:<br>
|
|
stt - Short to Top<br>
|
|
stb - Short to Bottom<br>
|
|
str - Short to Right<br>
|
|
stl - Short to Left<br>
|
|
ltt - Long to Top<br>
|
|
ltb - Long to Bottom<br>
|
|
ltr - Long to Right<br>
|
|
ltl - Long to Left<br>
|
|
fadeout - fading<br>
|
|
randomrotateout- Fade in, Rotate from a Random position and Degree<br>
|
|
</li>
|
|
<br>
|
|
<li>
|
|
<strong>data-x The </strong>horizontal position in the standard (via startwidth option defined) screen size (other screen sizes will be calculated)</li>
|
|
<li>
|
|
<strong>data-y </strong>vertical position in the standard (via startheight option defined) screen size (other screen sizes will be calculated)</li>
|
|
<br>
|
|
<li>
|
|
<strong>data-speed </strong>duration of the animation in milliseconds</li>
|
|
<br>
|
|
<li>
|
|
<strong>data-start after </strong>how many milliseconds should this caption start to show</li>
|
|
<br>
|
|
<li>
|
|
<strong>data-easing </strong>special easing effect of the animation. Options:<br>
|
|
easeOutBack,
|
|
easeInQuad,
|
|
easeOutQuad,
|
|
easeInOutQuad,
|
|
easeInCubic,
|
|
easeOutCubic<br>
|
|
easeInOutCubic,
|
|
easeInQuart,
|
|
easeOutQuart,
|
|
easeInOutQuart,
|
|
easeInQuint<br>
|
|
easeOutQuint,
|
|
easeInOutQuint,
|
|
easeInSine,
|
|
easeOutSine,
|
|
easeInOutSine<br>
|
|
easeInExpo,
|
|
easeOutExpo,
|
|
easeInOutExpo,
|
|
easeInCirc,
|
|
easeOutCirc,
|
|
easeInOutCirc<br>
|
|
easeInElastic,
|
|
easeOutElastic,
|
|
easeInOutElastic,
|
|
easeInBack,
|
|
easeOutBack,
|
|
easeInOutBack<br>
|
|
easeInBounce,
|
|
easeOutBounce,
|
|
easeInOutBounce
|
|
|
|
</li>
|
|
<br>
|
|
<li>
|
|
<strong>data-endspeed </strong>duration of the animation when caption leaves the stage in milliseconds</li>
|
|
<br>
|
|
<li>
|
|
<strong>data-end </strong>after how many milliseconds should this caption leave the stage (should be bigger than data-start+data-speed !</li>
|
|
<br>
|
|
<li>
|
|
<strong>data-endeasing </strong>special easing effect of the animation. Options:<br>
|
|
easeOutBack,
|
|
easeInQuad,
|
|
easeOutQuad,
|
|
easeInOutQuad,
|
|
easeInCubic,
|
|
easeOutCubic<br>
|
|
easeInOutCubic,
|
|
easeInQuart,
|
|
easeOutQuart,
|
|
easeInOutQuart,
|
|
easeInQuint<br>
|
|
easeOutQuint,
|
|
easeInOutQuint,
|
|
easeInSine,
|
|
easeOutSine,
|
|
easeInOutSine<br>
|
|
easeInExpo,
|
|
easeOutExpo,
|
|
easeInOutExpo,
|
|
easeInCirc,
|
|
easeOutCirc,
|
|
easeInOutCirc<br>
|
|
easeInElastic,
|
|
easeOutElastic,
|
|
easeInOutElastic,
|
|
easeInBack,
|
|
easeOutBack,
|
|
easeInOutBack<br>
|
|
easeInBounce,
|
|
easeOutBounce,
|
|
easeInOutBounce
|
|
<br>
|
|
<br>
|
|
</li>
|
|
</ul>
|
|
<div>
|
|
<img alt="" src="assets/images/image_1.jpg"></div>
|
|
<div>
|
|
</div>
|
|
<h4>
|
|
<br>
|
|
04 Colored Backgoround instead of Images</h4>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
In order you wish to use a colored Background instead of some images as main Image in the Slider you can use the transparent image with a colored background style:</div>
|
|
|
|
<div>
|
|
</div>
|
|
<div>
|
|
<pre><img alt="" src="images/slides/transparent.png" style="background-color:#ff0000"></pre>
|
|
</div>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
</div>
|
|
|
|
<h4>
|
|
<br>
|
|
05 Videos</h4>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
In order to embed videos in the slider you can embed videos via iframe of your favorite video site that allows this kind of embedding. An example with Vimeo:</div>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
<pre class="brush: html">
|
|
<li data-transition="slideup" data-slotamount="20">
|
|
<img src="images/slides/image20.jpg" >
|
|
<div class="caption lfb boxshadow" data-x="70" data-y="120" data-speed="900"
|
|
data-start="500" data-easing="easeOutBack">
|
|
<iframe src="http://player.vimeo.com/video/29298709?title=0&amp;byline=0&amp;portrait=0" width="460"
|
|
height="259"></iframe>
|
|
</div>
|
|
</li></pre>
|
|
</div>
|
|
<br>
|
|
<h5>Full Screen Video</h5>
|
|
<p>
|
|
In order to play FullWidth Videos, use the class "fade fullscreenvideo" in the caption where you embeded the iFrame. Use data-x="0" and data-y="0" and data-speed="500" and data-start="10" for best effect. The Width and height of the iFrame should be 100% !</p>
|
|
<p>
|
|
In case you wish to use autoplay, just use the data-autplay="true" parameter in the div where you embeded the iFrame.</p>
|
|
<p>
|
|
<pre class="brush: html">
|
|
<li data-transition="slideup" data-slotamount="20">
|
|
<img src="images/slides/image20.jpg" >
|
|
<div class="caption fade fullscreenvideo" data-x="0" data-y="0"
|
|
data-speed="500" data-start="10" data-easing="easeOutBack">
|
|
<iframe src="http://player.vimeo.com/video/29298709?title=0&amp;byline=0&amp;portrait=0" width="100%"
|
|
height="100%"></iframe>
|
|
</div>
|
|
</li></pre>
|
|
</p>
|
|
<h4>
|
|
<br>
|
|
06 Banner Timer</h4>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
In order to use a banner timer, you will need to add the markup within the banner or fullwidthbanner divs.</div>
|
|
<div>
|
|
The markup should look like :</div>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
<div class="tp-bannertimer"></div><span class="Apple-tab-span" style="white-space:pre"> </span></div>
|
|
<div>
|
|
The use the Timer on the bottom just add the tp-bottom class to the timer like this :</div>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
<div class="tp-bannertimer tp-bottom"></div><span class="Apple-tab-span" style="white-space:pre"> </span></div>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
To remove this timer just simple remove the markup from the container, and that is it.</div>
|
|
</section>
|
|
<section id="responsive_basic">
|
|
<h3>Responsive Basic</h3><hr class="notop">
|
|
<p>
|
|
Responsive means that the slider will adjust to every screen width.</p>
|
|
<div>
|
|
To 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>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
The basic containers are build like this ( in none Fullwidth, but 4 Level Responsive Version):</div>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
<pre class="brush: css">
|
|
.bannercontainer {
|
|
padding:5px;
|
|
background-color:#fff;
|
|
width:890px;
|
|
position:relative;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
}
|
|
|
|
.banner{
|
|
width:890px; // MUST BE THE SAME AS IN THE OPTIONS <strong>startwidth</strong>
|
|
height:490px; // MUST BE THE SAME AS IN THE OPTIONS <strong>startheight</strong>
|
|
position:relative;
|
|
overflow:hidden;
|
|
}
|
|
|
|
|
|
|
|
|
|
</pre>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
</div>
|
|
<div>
|
|
The media queries that build the screen dependend container sizes:</div>
|
|
<div>
|
|
</div>
|
|
<pre class="brush: css">
|
|
@media only screen and (min-width: 768px) and (max-width: 959px) {
|
|
.banner, .bannercontainer{ width:750px; height:412px;}
|
|
.bannershadow {width:750px;}
|
|
}
|
|
|
|
@media only screen and (min-width: 480px) and (max-width: 767px) {
|
|
.banner, .bannercontainer{width:470px; height:258px;}
|
|
.bannershadow {width:470px;}
|
|
}
|
|
|
|
@media only screen and (min-width: 0px) and (max-width: 479px) {
|
|
.banner, .bannercontainer{width:300px;height:165px;}
|
|
.bannershadow {width:300px; margin-top:-5px;}
|
|
}</pre>
|
|
<br>
|
|
<h4>Calculate the Resopnsive sizes</h4>
|
|
<p>Here 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:<p>
|
|
<p> <strong>new width / original width * original height. </strong> So in our Examplce (step 1.) 750 / 890 * 490 == 413px
|
|
</div>
|
|
|
|
</section>
|
|
<section id="fullwidth">
|
|
<h3>Fullwidth</h3><hr class="notop">
|
|
<p>
|
|
This slider can go fullwidth too. We have added an <strong>index-fullwidth.html example</strong> for you in the zip.</p>
|
|
<p>
|
|
Please note the basic change in the markup.</p>
|
|
<p>
|
|
The surrounding containers are:</p>
|
|
<pre class="brush: html">
|
|
<div class="fullwidthbanner-container"><span class="Apple-tab-span" style="white-space:pre"> </span>
|
|
|
|
<div class="fullwidthbanner">...</div>
|
|
|
|
</div></pre>
|
|
<p>
|
|
</p>
|
|
<p>
|
|
The CSS is not splitted with Media-Queries but has a basic 100% value for width:</p>
|
|
<p>
|
|
</p>
|
|
<pre class="brush: css">
|
|
.fullwidthbanner-container{
|
|
width:100% !important;<span class="Apple-tab-span" style="white-space:pre"> </span>
|
|
position:relative;
|
|
padding:0;<span class="Apple-tab-span" style="white-space:pre"> </span>
|
|
max-height:450px !important; // Same value as in OPTIONS the <strong>startheight</strong> parameter
|
|
overflow:hidden;
|
|
}
|
|
</pre>
|
|
<p>
|
|
</p>
|
|
</section>
|
|
|
|
<section id="publicapi">
|
|
<h3>API Functions and Events</h3><hr class="notop">
|
|
<p> The 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.</p>
|
|
<pre class="brush: css">
|
|
var tpj=jQuery;
|
|
tpj.noConflict();
|
|
|
|
tpj(document).ready(function() {
|
|
|
|
if (tpj.fn.cssOriginal!=undefined)
|
|
tpj.fn.css = tpj.fn.cssOriginal;
|
|
|
|
var api = tpj('.banner').revolution(
|
|
....
|
|
</pre>
|
|
<p>You can see in the example index-responsive-API.html how to use the different functions, and how to get the trigered Events.</p>
|
|
<p>Once this is done you may use any of the following functions:</p>
|
|
<ul>
|
|
<li><strong>api.revpause()</strong> - Stops the Timer and autoplay</li>
|
|
<li><strong>api.revresume()</strong> - Starts the Timer and resume to autoplay</li>
|
|
<li><strong>api.revprev()</strong> - Change to previous slide</li>
|
|
<li><strong>api.revnext()</strong> - Change to next slide</li>
|
|
<li><strong>api.revshowslide(n)</strong> - Change to the slide with index Nr. (n)</li>
|
|
<li><strong>api.revmaxslide()</strong> - Show the amount of slides</li>
|
|
</ul>
|
|
<p>Or you may use any of the following Events:</p>
|
|
<ul>
|
|
<li><strong>revolution.slide.onchange</strong> - Event is triggered when Slide has been rotated</li>
|
|
<li><strong>revolution.slide.onpause</strong> - Event is triggered when Slider is on Pause</li>
|
|
<li><strong>revolution.slide.onresume</strong> - Event is triggered when Slider is back from Pause</li>
|
|
<li><strong>revolution.slide.onvideoplay</strong> - Event is triggered when YouTube or Vimeo Video has been started (only Online Mode !)</li>
|
|
<li><strong>revolution.slide.onvideostop</strong> - Event is triggered when YouTube or Vimeo Video has been stopped or Slide has been rotated (only Online Mode !)</li>
|
|
<li><strong>revolution.slide.onstop</strong> - - Event is triggered when slider has been stopped due the Loop and stop at Slide parameters</li>
|
|
<li><strong>revolution.slide.onbeforeswap</strong> - - Event is triggered when slider is going to change to next slide</li>
|
|
<li><strong>revolution.slide.onafterswap</strong> - - Event is triggered when slider has finnishded the change of the transition (full transition finnished)</li>
|
|
<li><strong>revolution.slide.onloaded</strong> - - Event is triggered when slider is loaded and it is prepared</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section id="licenses">
|
|
<h3>Licenses</h3><hr class="notop">
|
|
<p> Used Assets</p>
|
|
<ul> <li> Template 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>
|
|
<li> <a href="http://cortys.de/cssAnimate/">cssAnimate Plugin</a> Great and Simple cssAnimate jQuery Plugin</li>
|
|
<li> WaitForImages jQuery Plugin</li>
|
|
<li> <a href="http://www.netcu.de/jquery-touchwipe-iphone-ipad-library">Touch Wipe jQuery Plugin</a></li>
|
|
</ul>
|
|
<p> </p>
|
|
</section>
|
|
<section id="support">
|
|
<h3>Support</h3><hr class="notop">
|
|
<p> If you face problems with the installation or customization of our product please do not hesitate to contact us via our support ticket system:</p>
|
|
<p> <strong><a href="http://themepunch.ticksy.com">http://themepunch.ticksy.com</a></strong></p>
|
|
|
|
|
|
</section>
|
|
|
|
</div>
|
|
</body>
|
|
</html> |