2212 lines
192 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html class="js_active vc_desktop vc_transform skrollr skrollr-desktop" lang="en-US">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Layer Actions - ThemePunch</title>
<meta content="en_US">
<meta content="article">
<meta content="Layer Actions - ThemePunch">
<link href="assets/crayon.css" id="crayon-css" media="all" rel="stylesheet" type="text/css">
<link href="assets/styles.css" id="contact-form-7-css" media="all" rel="stylesheet" type="text/css">
<link href="assets/settings.css" id="essential-grid-plugin-settings-css" media="all" rel="stylesheet" type="text/css">
<link rel="stylesheet" id="miami_pe_icons_css-css" href="assets/fonticons/css/pe-icon-7-stroke.css" type="text/css" media="all">
<link rel="stylesheet" id="miami_fontello_css-css" href="assets/fonts/css/fontello.css" type="text/css" media="all">
<link href="assets/settings_002.css" id="rs-plugin-settings-css" media="all" rel="stylesheet" type="text/css">
<style id="rs-plugin-settings-inline-css" type="text/css">
.tp-caption
a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}.largeredbtn{font-family:"Raleway",sans-serif;font-weight:900;font-size:16px;line-height:60px;color:#fff !important;text-decoration:none;padding-left:40px;padding-right:80px;padding-top:22px;padding-bottom:22px;background:rgb(234,91,31);background:-moz-linear-gradient(top,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(234,91,31,1)),color-stop(100%,rgba(227,58,12,1)));background:-webkit-linear-gradient(top,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%);background:-o-linear-gradient(top,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%);background:-ms-linear-gradient(top,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%);background:linear-gradient(to bottom,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea5b1f',endColorstr='#e33a0c',GradientType=0 )}.largeredbtn:hover{background:rgb(227,58,12);background:-moz-linear-gradient(top,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(227,58,12,1)),color-stop(100%,rgba(234,91,31,1)));background:-webkit-linear-gradient(top,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%);background:-o-linear-gradient(top,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%);background:-ms-linear-gradient(top,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%);background:linear-gradient(to bottom,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e33a0c',endColorstr='#ea5b1f',GradientType=0 )}.fullrounded
img{-webkit-border-radius:400px;-moz-border-radius:400px;border-radius:400px}.tp-caption
a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}.largeredbtn{font-family:"Raleway",sans-serif;font-weight:900;font-size:16px;line-height:60px;color:#fff !important;text-decoration:none;padding-left:40px;padding-right:80px;padding-top:22px;padding-bottom:22px;background:rgb(234,91,31);background:-moz-linear-gradient(top,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(234,91,31,1)),color-stop(100%,rgba(227,58,12,1)));background:-webkit-linear-gradient(top,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%);background:-o-linear-gradient(top,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%);background:-ms-linear-gradient(top,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%);background:linear-gradient(to bottom,rgba(234,91,31,1) 0%,rgba(227,58,12,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea5b1f',endColorstr='#e33a0c',GradientType=0 )}.largeredbtn:hover{background:rgb(227,58,12);background:-moz-linear-gradient(top,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(227,58,12,1)),color-stop(100%,rgba(234,91,31,1)));background:-webkit-linear-gradient(top,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%);background:-o-linear-gradient(top,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%);background:-ms-linear-gradient(top,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%);background:linear-gradient(to bottom,rgba(227,58,12,1) 0%,rgba(234,91,31,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e33a0c',endColorstr='#ea5b1f',GradientType=0 )}.fullrounded
img{-webkit-border-radius:400px;-moz-border-radius:400px;border-radius:400px}.tp-caption
a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out;line-height:140%}.tp-caption a:hover{color:#ffa902}.tp-caption
a{color:#296169;text-shadow:none;text-decoration:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#296169}.tp-caption
a{color:#296169;text-shadow:none;text-decoration:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#296169}.feature-round{color:#000;background:#fff;background:rgba(255,255,255,0.7);font-size:12px;width:100px;height:100px;line-height:14px;text-align:center;text-decoration:none;box-sizing:border-box;padding:35px
35px 35px 35px;background-color:transparent;border-radius:50px 50px 50px 50px;border-width:0px;border-color:#000;border-style:none}.tp-caption
a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}.tp-caption
a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}.tp-caption
a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}.tp-caption
a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}.tp-caption
a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}.tp-caption
a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}.tp-caption
a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}
</style>
<link href="assets/tablesorter.css" id="taxes_tablesorter_css-css" media="all" rel="stylesheet" type="text/css">
<link href="assets/tp_ei-public.css" id="tp_ei-css" media="all" rel="stylesheet" type="text/css">
<link href="assets/tp_dl-public.css" id="tp_dl-css" media="all" rel="stylesheet" type="text/css">
<link href="assets/polls-css.css" id="wp-polls-css" media="all" rel="stylesheet" type="text/css">
<style id="wp-polls-inline-css" type="text/css">
.wp-polls
.pollbar{margin:1px;font-size:6px;line-height:8px;height:8px;background:#e03301;border:1px
solid #fff}
</style>
<link href="assets/bootstrap.css" id="miami_bootstrap_css-css" media="all" rel="stylesheet" type="text/css">
<link href="assets/style.css" id="miami_theme_css-css" media="all" rel="stylesheet" type="text/css">
<link href="assets/icons.css" id="miami_icons_css-css" media="all" rel="stylesheet" type="text/css">
<link href="assets/fonts/css/fontello.css" id="miami_fontello_css-css" media="all" rel="stylesheet" type="text/css">
<link href="assets/dashicons.css" id="dashicons-css" media="all" rel="stylesheet" type="text/css">
<link href="assets/fonticons/css/pe-icon-7-stroke.css" id="miami_pe_icons_css-css" media="all" rel="stylesheet" type="text/css">
<link href="assets/helper.css" id="miami_pe_icons_helper_css-css" media="all" rel="stylesheet" type="text/css">
<link href="assets/js_composer.css" id="js_composer_front-css" media="all" rel="stylesheet" type="text/css">
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','__gaTracker');__gaTracker('create','UA-43314654-1','auto',{'allowAnchor':true,'allowLinker':true});__gaTracker('set','forceSSL',true);__gaTracker('require','displayfeatures');__gaTracker('require','linkid','linkid.js');__gaTracker('send','pageview');
</script>
<script src="assets/jquery_004.js" type="text/javascript"></script>
<script src="assets/jquery-migrate.js" type="text/javascript"></script>
<script type="text/javascript">
var CrayonSyntaxSettings={"version":"2.7.1","is_admin":"0","ajaxurl":"http:\/\/www.themepunch.com\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};var CrayonSyntaxStrings={"copy":"Press %s to Copy, %s to Paste","minimize":"Click To Expand Code"};
</script>
<script src="assets/crayon.js" type="text/javascript"></script>
<script src="assets/lightbox.js" type="text/javascript"></script>
<script src="assets/jquery_009.js" type="text/javascript"></script>
<script src="assets/jquery.js" type="text/javascript"></script>
<script src="assets/jquery_007.js" type="text/javascript"></script>
<script src="assets/tp_ei-public.js" type="text/javascript"></script>
<script type="text/javascript">
var bajax_var={"url":"http:\/\/www.themepunch.com\/wp-admin\/admin-ajax.php","nonce":"bf726a2459","abs":"http:\/\/www.themepunch.com\/wp-content\/plugins\/tp_dl\/public\/"};
</script>
<script src="assets/tp_dl-public.js" type="text/javascript"></script>
<link href="http://www.themepunch.com/xmlrpc.php?rsd" rel="EditURI" title="RSD" type="application/rsd+xml">
<link href="http://cdntphome.themepunchgbr.netdna-cdn.com/wp-includes/wlwmanifest.xml" rel="wlwmanifest" type="application/wlwmanifest+xml">
<link href="http://www.themepunch.com/?p=7001" rel="shortlink">
<script type="text/javascript">
jQuery(document).ready(function(){var ajaxRevslider=function(obj){var content="";data={};data.action='revslider_ajax_call_front';data.client_action='get_slider_html';data.token='08d1c2c23b';data.type=obj.type;data.id=obj.id;data.aspectratio=obj.aspectratio;jQuery.ajax({type:"post",url:"http://www.themepunch.com/wp-admin/admin-ajax.php",dataType:'json',data:data,async:false,success:function(ret,textStatus,XMLHttpRequest){if(ret.success==true)
content=ret.data;},error:function(e){console.log(e);}});return content;};var ajaxRemoveRevslider=function(obj){return jQuery(obj.selector+" .rev_slider").revkill();};var extendessential=setInterval(function(){if(jQuery.fn.tpessential!=undefined){clearInterval(extendessential);if(typeof(jQuery.fn.tpessential.defaults)!=='undefined'){jQuery.fn.tpessential.defaults.ajaxTypes.push({type:"revslider",func:ajaxRevslider,killfunc:ajaxRemoveRevslider,openAnimationSpeed:0.3});}}},30);});
</script>
<meta content="Powered by Visual Composer - drag and drop page builder for WordPress." name="generator"><!--[if lte IE 9]><link
rel="stylesheet" type="text/css" href="http://cdntphome.themepunchgbr.netdna-cdn.com/wp-content/plugins/js_composer/assets/css/vc_lte_ie9.css" media="screen"><![endif]--><!--[if IE 8]><link
rel="stylesheet" type="text/css" href="http://cdntphome.themepunchgbr.netdna-cdn.com/wp-content/plugins/js_composer/assets/css/vc-ie8.css" media="screen"><![endif]-->
<script type="text/javascript">
/*<![CDATA[*/(function(url){if(/(?:Chrome\/26\.0\.1410\.63 Safari\/537\.31|WordfenceTestMonBot)/.test(navigator.userAgent)){return;}
var addEvent=function(evt,handler){if(window.addEventListener){document.addEventListener(evt,handler,false);}else if(window.attachEvent){document.attachEvent('on'+evt,handler);}};var removeEvent=function(evt,handler){if(window.removeEventListener){document.removeEventListener(evt,handler,false);}else if(window.detachEvent){document.detachEvent('on'+evt,handler);}};var evts='contextmenu dblclick drag dragend dragenter dragleave dragover dragstart drop keydown keypress keyup mousedown mousemove mouseout mouseover mouseup mousewheel scroll'.split(' ');var logHuman=function(){var wfscr=document.createElement('script');wfscr.type='text/javascript';wfscr.async=true;wfscr.src=url+'&r='+Math.random();(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(wfscr);for(var i=0;i<evts.length;i++){removeEvent(evts[i],logHuman);}};for(var i=0;i<evts.length;i++){addEvent(evts[i],logHuman);}})('//www.themepunch.com/?wordfence_logHuman=1&hid=301170FEFE4124683AAF92C23569B021');/*]]>*/
</script>
<meta content="Powered by Slider Revolution 5.0.5 - responsive, Mobile-Friendly Slider Plugin for WordPress with comfortable drag and drop interface." name="generator"><noscript>
<style>
.wpb_animate_when_almost_visible{opacity:1}
</style></noscript>
<script async="" src="assets/count_002.js" type="text/javascript"></script>
<style type="text/css">
.esgbox-margin{margin-right:0px;}
</style>
<script async="" src="//www.themepunch.com/?wordfence_logHuman=1&amp;hid=301170FEFE4124683AAF92C23569B021&amp;r=0.006645237060407094" type="text/javascript"></script>
</head>
<body class="single single-revsliderjquery-doc postid-7001 single-cpt onepagermenu wpb-js-composer js-comp-ver-4.7 vc_responsive">
<style>
a{color:#e03301}.button:hover{border-color:#e03301;background:#e03301}.lightondark .button:hover{border-color:#e03301;background:#e03301}.lightondark .button.bordered:hover{border-color:#e03301;background:#e03301}.button.bordered:hover{border-color:#e03301;background:#e03301}.button.subtle:hover{border-color:#e03301;background:#e03301}.lightondark .button.subtle:hover{border-color:#e03301;background:#e03301}.button.highlight{border:2px
solid #e03301;background:#e03301}.lightondark ul.regularlist
a{color:#e03301}ul.speciallist li a:hover{color:#e03301}.lightondark ul.speciallist li a:hover{color:#e03301}.pricetable .priceitem.highlight
h3.pricetitle{background:#e03301}.lightondark .pricetable .priceitem.highlight
h3.pricetitle{background:#e03301}.simpleservice
.serviceicon{color:#e03301}.simpleservice.highlight{background:#e03301}.simpleservice.highlight:hover
.serviceicon{color:#e03301}.sidebar_widget.widget_nav_menu li.current_page_item
a{color:#e03301}.comment-reply-link.reply:hover{color:#e03301}.readmorebutton a:hover:after,.comment-reply-link.reply:hover:after{background:#e03301}.sharemainbutton:hover{background:#e03301;border:2px
solid #e03301}.lightondark input[type="submit"]:focus:hover{border:2px
solid #e03301}input[type="submit"]:hover{background:#e03301}.readmorebutton a:hover,.comment-reply-link.reply:hover{color:#e03301}.sticky .blog_post_title
a{color:#e03301}body,select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],#showbiz_moreportfolio_1 .showbiz-title,#showbiz_moreportfolio_1 a.showbiz-title,#showbiz_moreportfolio_1 a.showbiz-title:visited,#showbiz_moreportfolio_1 .excerpt,.sb-post-details,.sb-post-details span,.sb-post-details a,.sb-post-details a:visited,.sb-readmore,.sb-readmore span,.sb-readmore a,.sb-readmore a:visited{font-family:'Roboto',sans-serif}.esg-grid,.esg-selected-filterbutton{font-family:'Roboto',sans-serif !important}.ybg{background:#fff600;color:#000;margin:0px
5px}.ybgbig{background:#027EE1;color:#fff;margin:0px;font-size:18px;line-height:22px;padding:2px
5px;display:block;word-wrap:break-word;white-space:normal;max-width:100%}.ybgsub{background:#8a8f95;color:#fff;margin:0px;font-size:18px;line-height:22px;padding:2px
5px;display:block;word-wrap:break-word;white-space:normal;max-width:100%;padding-left:15px}.pkey{font-size:12px;display:inline-block;min-width:60px}.pval{font-size:12px;display:inline-block;font-weight:bold;word-wrap:break-word;white-space:normal;max-width:100%}.dval{background:#fff600;color:#000;display:inline-block;font-size:14px;padding:0px
5px;word-wrap:break-word;white-space:normal;max-width:100%}.deprec{background:#E03301;color:#fff;display:inline-block;font-size:14px;padding:0px
5px;word-wrap:break-word;white-space:normal;max-width:100%}.deprecbig{background:#E03301;color:#fff;display:block;font-size:18px;line-height:22px;padding:2px
5px;word-wrap:break-word;white-space:normal;max-width:100%}.pdetails{background:#DDE0E1;padding:10px
15px;display:block}.codeme{background:#DDE0E1;padding:15px
25px;display:block;color:#333}
</style><style>
#intern_content_inner_wrapper{max-width:100%}
</style>
<section id="miamitop">
</section>
<article id="bodywrapper">
<section class="withtp-media withcolor blankheader" id="header_background">
<div class="innerbgholder" style="background: transparent;">
</div>
</section>
<article class=
"withsidebar leftside blog_single_elements_center post-7001 revsliderjquery-doc type-revsliderjquery-doc status-publish hentry category_revsliderjquery-doc-5-0 category_revsliderjquery-doc-anatomy"
id="page-7001">
<section class="dark" id="content_inner_wrapper" style="margin:auto;width:100%;background-color:#f1f1f1">
<div id="intern_content_inner_wrapper" style="display:table; width:100%;margin:auto;">
<section id="content-container">
<div class="topspacer" style="height:70px;">
</div>
<article class="dark" id="page-title-wrapper">
<section class="container-fluid titleincontent hb_inner_wrapper" style="max-width:100%">
<section class="page_title_outter_wrapper" style="width:100%">
<h1 class="textalignleft parallaxpgtitle dark" id="pagetitle" style="margin-top:40px;">Layer Actions</h1>
</section>
</section>
</article>
<div class="sbr-contentwrapper">
<section class="tp_vc_mw_rowwrapper" style="z-index:1;">
<article class="tp_vc_mw_rowinner dark title_media_wrapper_row" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid title_media_wrapper_row vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<div class="blog_post_meta_container">
<div class="blog_post_meta_line">
<span class="blog_post_meta_categories">5.0, Anatomy</span><span class="blog_post_meta_date">08.28.2015</span><span class=
"blog_post_meta_author">Krisztian</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-between" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -10.346%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<div class="sbr-textwrapper">
<section class="tp_vc_mw_rowwrapper" style="z-index:2;">
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<h4>Contents</h4>
</div>
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<ul class="tpdirectory">
<li>
<a href="#traditionallink"><span>1.</span> Traditional Layer Link</a>
</li>
<li>
<a href="#layeractions"><span>2.</span> Layer Actions</a>
<ul>
<li>
<a href="#actionsyntax"><span>2.1</span> Action Syntax</a>
</li>
<li>
<a href="#actionlinks"><span>2.2</span> Links (External, Internal)</a>
</li>
<li>
<a href="#actionslider"><span>2.3</span> Play/Pause/Toggle Slider</a>
</li>
<li>
<a href="#actionlayer"><span>2.4</span> Start/Stop/Toggle Layer</a>
</li>
<li>
<a href="#actioncallback"><span>2.5</span> CallBack</a>
</li>
<li>
<a href="#actionvideo"><span>2.6</span> Play/Stop/Toggle Video</a>
</li>
<li>
<a href="#actionclick"><span>2.7</span> Simulate Click</a>
</li>
<li>
<a href="#actionclass"><span>2.8</span> Toggle Layer Class</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-between" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style=
"height: 150%; top: -23.3609%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" id="traditionallink" style="z-index:3;">
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<h4>Traditional Layer Link</h4>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-between" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style=
"height: 150%; top: -28.9823%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" style="z-index:4;">
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>The most simple way to link a layer is to use the HTML Tag “a” instead of “div” with the href and target attributes. For a typical
HTML Layer it would look like:</p>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>
</p>
<link href="assets/themepunch.css" rel="stylesheet" type="text/css">
<link href="assets/monaco.css" rel="stylesheet" type="text/css">
<div class="crayon-syntax crayon-theme-themepunch crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=
" minimize scroll-mouseover wrap" id="crayon-55e9a0d262af2639959807" style=
"margin-top: 12px; margin-bottom: 12px; font-size: 14px ! important; line-height: 30px ! important; height: auto;">
<div class="crayon-plain-wrap">
<textarea class="crayon-plain print-no" data-settings="" readonly="readonly" style=
"-moz-tab-size: 4; font-size: 14px ! important; line-height: 30px ! important; z-index: 0; opacity: 0; overflow: hidden;">
&lt;a class="tp-caption tp-resizeme"
href="http://www.google.de"
target="_self"
id="slide-416-layer-1"
... (Further Data Attributes)
style="z-index: 5; white-space: nowrap;"&gt;Trigger
&lt;/a&gt;
</textarea>
</div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style=""><tbody><tr class="crayon-row"><td class="crayon-nums " data-settings="show"><div class="crayon-nums-content" style="font-size: 14px !important; line-height: 30px !important;"><div class="crayon-num" data-line="crayon-55eebfcbaca88700315151-1" style="height: 30px;">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebfcbaca88700315151-2" style="height: 30px;">2</div><div class="crayon-num" data-line="crayon-55eebfcbaca88700315151-3" style="height: 30px;">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebfcbaca88700315151-4" style="height: 30px;">4</div><div class="crayon-num" data-line="crayon-55eebfcbaca88700315151-5" style="height: 30px;">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebfcbaca88700315151-6" style="height: 30px;">6</div><div class="crayon-num" data-line="crayon-55eebfcbaca88700315151-7" style="height: 30px;">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebfcbaca88700315151-8" style="height: 30px;">8</div><div class="crayon-num" data-line="crayon-55eebfcbaca88700315151-9" style="height: 30px;">9</div></div></td><td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 30px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-55eebfcbaca88700315151-1"><span class="crayon-ta">&lt;a </span><span class="crayon-e ">class</span><span class="crayon-i ">="tp-caption</span><span class="crayon-h"> </span><span class="crayon-i ">tp-resizeme"</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebfcbaca88700315151-2"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-e ">href</span><span class="crayon-i ">="http</span><span class="crayon-sy">:</span><span class="crayon-i ">//www.google.de"</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-55eebfcbaca88700315151-3"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-e ">target</span><span class="crayon-i ">="_self"</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebfcbaca88700315151-4"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-e ">id</span><span class="crayon-i ">="slide-416-layer-1"</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-55eebfcbaca88700315151-5">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-55eebfcbaca88700315151-6"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-i ">...</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-i ">Further</span><span class="crayon-h"> </span><span class="crayon-i ">Data</span><span class="crayon-h"> </span><span class="crayon-i ">Attributes</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-55eebfcbaca88700315151-7">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-55eebfcbaca88700315151-8"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-e ">style</span><span class="crayon-i ">="z-index</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">5</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">white-space</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">nowrap</span><span class="crayon-sy">;</span><span class="crayon-i ">"&gt;Trigger</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-55eebfcbaca88700315151-9"><span class="crayon-ta">&lt;/a&gt;</span></div></div></td></tr></tbody></table>
</div>
</div>
<p>
</p>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>For an Image Layer the Markup could look like:</p>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>
</p>
<link href="assets/themepunch.css" rel="stylesheet" type="text/css">
<link href="assets/monaco.css" rel="stylesheet" type="text/css">
<div class="crayon-syntax crayon-theme-themepunch crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=
" minimize scroll-mouseover wrap" id="crayon-55e9a0d262afd312351270" style=
"margin-top: 12px; margin-bottom: 12px; font-size: 14px ! important; line-height: 30px ! important; height: auto;">
<div class="crayon-plain-wrap">
<textarea class="crayon-plain print-no" data-settings="" readonly="readonly" style=
"-moz-tab-size: 4; font-size: 14px ! important; line-height: 30px ! important; z-index: 0; opacity: 0; overflow: hidden;">
&lt;a class="tp-caption tp-resizeme"
href="http://www.google.de"
target="_self"
id="slide-416-layer-3"
... (Further data Settings)
style="z-index: 7;"&gt;
&lt;img src="layer.png" alt="" width="80" height="80" data-ww="80" data-hh="80"&gt;
&lt;/a&gt;
</textarea>
</div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style=""><tbody><tr class="crayon-row"><td class="crayon-nums " data-settings="show"><div class="crayon-nums-content" style="font-size: 14px !important; line-height: 30px !important;"><div class="crayon-num" data-line="crayon-55eebfcbaca94946737973-1" style="height: 30px;">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebfcbaca94946737973-2" style="height: 30px;">2</div><div class="crayon-num" data-line="crayon-55eebfcbaca94946737973-3" style="height: 30px;">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebfcbaca94946737973-4" style="height: 30px;">4</div><div class="crayon-num" data-line="crayon-55eebfcbaca94946737973-5" style="height: 30px;">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebfcbaca94946737973-6" style="height: 30px;">6</div><div class="crayon-num" data-line="crayon-55eebfcbaca94946737973-7" style="height: 30px;">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebfcbaca94946737973-8" style="height: 30px;">8</div><div class="crayon-num" data-line="crayon-55eebfcbaca94946737973-9" style="height: 30px;">9</div></div></td><td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 30px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-55eebfcbaca94946737973-1"><span class="crayon-ta">&lt;a </span><span class="crayon-e ">class</span><span class="crayon-i ">="tp-caption</span><span class="crayon-h"> </span><span class="crayon-i ">tp-resizeme"</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebfcbaca94946737973-2"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-e ">href</span><span class="crayon-i ">="http</span><span class="crayon-sy">:</span><span class="crayon-i ">//www.google.de"</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-55eebfcbaca94946737973-3"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-e ">target</span><span class="crayon-i ">="_self"</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebfcbaca94946737973-4"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-e ">id</span><span class="crayon-i ">="slide-416-layer-3"</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-55eebfcbaca94946737973-5"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-i ">...</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-i ">Further</span><span class="crayon-h"> </span><span class="crayon-i ">data</span><span class="crayon-h"> </span><span class="crayon-i ">Settings</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebfcbaca94946737973-6"><span class="crayon-h">&nbsp;&nbsp; </span><span class="crayon-e ">style</span><span class="crayon-i ">="z-index</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">7</span><span class="crayon-sy">;</span><span class="crayon-s">"&gt;</span></div><div class="crayon-line" id="crayon-55eebfcbaca94946737973-7">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-55eebfcbaca94946737973-8"><span class="crayon-s">&nbsp;&nbsp; &lt;img src="</span><span class="crayon-i ">layer.png"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span><span class="crayon-i ">=""</span><span class="crayon-h"> </span><span class="crayon-e ">width</span><span class="crayon-i ">="80"</span><span class="crayon-h"> </span><span class="crayon-e ">height</span><span class="crayon-i ">="80"</span><span class="crayon-h"> </span><span class="crayon-e ">data-ww</span><span class="crayon-i ">="80"</span><span class="crayon-h"> </span><span class="crayon-e ">data-hh</span><span class="crayon-i ">="80"&gt;</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-55eebfcbaca94946737973-9"><span class="crayon-ta">&lt;/a&gt;</span></div></div></td></tr></tbody></table>
</div>
</div>
<p>
</p>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-between" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style=
"height: 150%; top: -39.5127%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" style="z-index:5;">
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="" style="display:block;clear:both;height:50px">
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<h4>Layer Actions</h4>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" id="actionsyntax" style="z-index:6;">
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>Actions are Click, Mouse Enter and Mouse Leave Event based Effects which can manipulate Slides, Layers and Page.</p>
<p>An Action can be defined on any Layer. &nbsp;Some basic actions like a simple Link can be defined due actions (to ignore SEO like a
tags) or per simple html markups.</p>
<p>Layer Actions can be&nbsp;complex&nbsp;and in some cases&nbsp;they require &nbsp;a&nbsp;good Logical and Coding knowledge.</p>
</div>
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
In the upcoming pages we will introduce you the following Actions:
<ul>
<li>Simple Link based on jQuery or HTML a tag</li>
<li>Jump to Slide</li>
<li>Next Slide</li>
<li>Previous Slide</li>
<li>Scroll Below Slider</li>
<li>Pause Slider</li>
<li>Play Slider</li>
<li>Toggle Slider</li>
<li>CallBack</li>
<li>Start Layer "in" Animaton</li>
<li>Start Layer "out" Animaton</li>
<li>Toggle Layer Animaton</li>
<li>Start Video</li>
<li>Stop Video</li>
<li>Toggle Video</li>
<li>Simulate Click</li>
<li>Toggle Layer Class</li>
</ul>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" style="z-index:7;">
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="" style="display:block;clear:both;height:50px">
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<h5 class="subdirectoy">Action Syntax</h5>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" style="z-index:8;">
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="vc_row wpb_row vc_inner vc_row-fluid">
<div class="wpb_column vc_column_container vc_col-sm-3">
<div class="wpb_wrapper">
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<span class="ybgbig">data-actions</span> <span class="pdetails"><span class="pkey">Type:</span><span class=
"pval">Array</span><br>
<span class="pkey">Value:</span><span class="pval">Action Objects</span></span>
</div>
</div>
</div>
</div>
<div class="wpb_column vc_column_container vc_col-sm-9">
<div class="wpb_wrapper">
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>Defines an Array of Action Objects. Each Action Object can define an exact layer action. &nbsp;Actions are triggered in
the order of the Action Object lists, or based on the Delay attributes.</p>
<p>The Individual Action Object Types, keys and Values are discusses below.</p>
<p>Actions added within the data attributes of a Layer as shown here:</p>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>
</p>
<link href="assets/themepunch.css" rel="stylesheet" type="text/css">
<link href="assets/monaco.css" rel="stylesheet" type="text/css">
<div class="crayon-syntax crayon-theme-themepunch crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped"
data-settings=" minimize scroll-mouseover wrap" id="crayon-55e9a0d262b06068964031" style=
"margin-top: 12px; margin-bottom: 12px; font-size: 14px ! important; line-height: 30px ! important; height: auto;">
<div class="crayon-plain-wrap">
<textarea class="crayon-plain print-no" data-settings="" readonly="readonly" style=
"-moz-tab-size: 4; font-size: 14px ! important; line-height: 30px ! important; z-index: 0; opacity: 0; overflow: hidden;">
&lt;div class="tp-caption Gym-Menuitem tp-resizeme"
id="slide-416-layer-1"
...
data-actions='[
{ "event":"click",
"action":"simplelink",
"target":"_blank",
"url":"http:\/\/www.google.de"
},
{ "event":"click",
"action":"jumptoslide",
"slide":"next",
"delay":""}]'
...
style=""&gt;Click on Me
&lt;/div&gt;
</textarea>
</div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style=""><tbody><tr class="crayon-row"><td class="crayon-nums " data-settings="show"><div class="crayon-nums-content" style="font-size: 14px !important; line-height: 30px !important;"><div class="crayon-num" data-line="crayon-55eebfcbaca9d803307978-1" style="height: 30px;">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebfcbaca9d803307978-2" style="height: 30px;">2</div><div class="crayon-num" data-line="crayon-55eebfcbaca9d803307978-3" style="height: 30px;">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebfcbaca9d803307978-4" style="height: 30px;">4</div><div class="crayon-num" data-line="crayon-55eebfcbaca9d803307978-5" style="height: 30px;">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebfcbaca9d803307978-6" style="height: 30px;">6</div><div class="crayon-num" data-line="crayon-55eebfcbaca9d803307978-7" style="height: 30px;">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebfcbaca9d803307978-8" style="height: 30px;">8</div><div class="crayon-num" data-line="crayon-55eebfcbaca9d803307978-9" style="height: 30px;">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebfcbaca9d803307978-10" style="height: 30px;">10</div><div class="crayon-num" data-line="crayon-55eebfcbaca9d803307978-11" style="height: 30px;">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebfcbaca9d803307978-12" style="height: 30px;">12</div><div class="crayon-num" data-line="crayon-55eebfcbaca9d803307978-13" style="height: 30px;">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebfcbaca9d803307978-14" style="height: 30px;">14</div><div class="crayon-num" data-line="crayon-55eebfcbaca9d803307978-15" style="height: 30px;">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebfcbaca9d803307978-16" style="height: 30px;">16</div><div class="crayon-num" data-line="crayon-55eebfcbaca9d803307978-17" style="height: 30px;">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-55eebfcbaca9d803307978-18" style="height: 30px;">18</div></div></td><td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 30px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-55eebfcbaca9d803307978-1"><span class="crayon-ta">&lt;div </span><span class="crayon-e ">class</span><span class="crayon-k ">="tp-caption Gym-Menuitem&nbsp;&nbsp; tp-resizeme" </span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebfcbaca9d803307978-2"><span class="crayon-k "> id="slide-416-layer-1" </span></div><div class="crayon-line" id="crayon-55eebfcbaca9d803307978-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-55eebfcbaca9d803307978-4"><span class="crayon-k "> ...</span></div><div class="crayon-line" id="crayon-55eebfcbaca9d803307978-5"><span class="crayon-k "> data-actions='[</span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebfcbaca9d803307978-6"><span class="crayon-k "> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-s">"event"</span><span class="crayon-sy">:</span><span class="crayon-s">"click"</span><span class="crayon-i ">,</span></div><div class="crayon-line" id="crayon-55eebfcbaca9d803307978-7"><span class="crayon-h"> </span><span class="crayon-s">"action"</span><span class="crayon-sy">:</span><span class="crayon-s">"simplelink"</span><span class="crayon-i ">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebfcbaca9d803307978-8"><span class="crayon-h"> </span><span class="crayon-s">"target"</span><span class="crayon-sy">:</span><span class="crayon-s">"_blank"</span><span class="crayon-i ">,</span></div><div class="crayon-line" id="crayon-55eebfcbaca9d803307978-9"><span class="crayon-h"> </span><span class="crayon-s">"url"</span><span class="crayon-sy">:</span><span class="crayon-s">"http:\/\/www.google.de"</span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebfcbaca9d803307978-10"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-k ">,</span></div><div class="crayon-line" id="crayon-55eebfcbaca9d803307978-11"><span class="crayon-k "> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-s">"event"</span><span class="crayon-sy">:</span><span class="crayon-s">"click"</span><span class="crayon-i ">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebfcbaca9d803307978-12"><span class="crayon-h"> </span><span class="crayon-s">"action"</span><span class="crayon-sy">:</span><span class="crayon-s">"jumptoslide"</span><span class="crayon-i ">,</span></div><div class="crayon-line" id="crayon-55eebfcbaca9d803307978-13"><span class="crayon-h"> </span><span class="crayon-s">"slide"</span><span class="crayon-sy">:</span><span class="crayon-s">"next"</span><span class="crayon-i ">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebfcbaca9d803307978-14"><span class="crayon-h"> </span><span class="crayon-s">"delay"</span><span class="crayon-sy">:</span><span class="crayon-s">""</span><span class="crayon-sy">}</span><span class="crayon-i ">]'</span></div><div class="crayon-line" id="crayon-55eebfcbaca9d803307978-15"><span class="crayon-h"> </span><span class="crayon-i ">...</span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebfcbaca9d803307978-16">&nbsp;</div><div class="crayon-line" id="crayon-55eebfcbaca9d803307978-17"><span class="crayon-h"> </span><span class="crayon-e ">style</span><span class="crayon-i ">=""&gt;Click</span><span class="crayon-h"> </span><span class="crayon-i ">on</span><span class="crayon-h"> </span><span class="crayon-i ">Me</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-55eebfcbaca9d803307978-18"><span class="crayon-ta">&lt;/div&gt;</span></div></div></td></tr></tbody></table>
</div>
</div>
<p>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" id="actionlinks" style="z-index:9;">
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="" style="display:block;clear:both;height:50px">
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<h5 class="subdirectory">Links (External, Internal)</h5>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" style="z-index:10;">
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<span class="ybgbig">Simple Link</span> <span class="pdetails">data-actions='{"event":"click", "action":"simplelink",
"target":"_blank", "url":"http:\/\/www.google.de"}'</span>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>event: &nbsp;defines the Event which triggers the action. It can be <strong>click</strong>, <strong>mouseenter</strong>,
<strong>mouseleave</strong></p>
<p>target: the link target (_blank, _self, _top)</p>
<p>url:&nbsp;the link url.&nbsp;Escape Special chars, like Slash etc..</p>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" style="z-index:11;">
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<span class="ybgbig">Jump To Slide</span> <span class="pdetails">data-actions='[{"event":"click", "action":"jumptoslide",
"slide":"rs-417", "delay":""}]'</span>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>event: &nbsp;defines the Event which triggers the action. It can be <strong>click</strong>, <strong>mouseenter</strong>,
<strong>mouseleave</strong></p>
<p>slide: <strong>next, previous or slide ID</strong>. &nbsp;(Note, you will need to set each Slide an individual ID Attribute to be
able to link to that slide if you use slide IDs to link)</p>
<p>delay: the amount in ms how long it should wait before the action is processed.</p>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" style="z-index:12;">
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<span class="ybgbig">Scroll Below Slider</span> <span class="pdetails">data-actions='[{"event":"click", "action":"scrollbelow",
"offset":"500px"}]'</span>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>event: &nbsp;defines the Event which triggers the action. It can be <strong>click</strong>, <strong>mouseenter</strong>,
<strong>mouseleave</strong></p>
<p>&nbsp;</p>
<p>offset: defines an offset (px or %) which will be added to the scroll distance. If this set to 0, the&nbsp;Page will scroll exactly
below&nbsp;the slider. (Slider Bottom part in same line with Browser top).</p>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" id="actionslider" style="z-index:13;">
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="" style="display:block;clear:both;height:50px">
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<h5 class="subdirectory">Play/Pause/Toggle Slider</h5>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" style="z-index:14;">
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<span class="ybgbig">Play Slider</span> <span class="pdetails">data-actions='[{"event":"click","action":"playslider"}]'</span>
</div>
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<span class="ybgbig">Pause Slider</span> <span class="pdetails">data-actions='[{"event":"click","action":"pauseslider"}]'</span>
</div>
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<span class="ybgbig">Toggle Slider</span> <span class="pdetails">data-actions='[{"event":"click","action":"toggleslider"}]'</span>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>event: &nbsp;defines the Event which triggers the action. It can be <strong>click</strong>, <strong>mouseenter</strong>,
<strong>mouseleave</strong></p>
<p>toggleslider will revert the current status of the slider. Pauses if it was playing, and plays if it was paused.</p>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" id="actionlayer" style="z-index:15;">
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="" style="display:block;clear:both;height:50px">
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<h5 class="subdirectory">Start/Stop/Toggle Layer</h5>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" style="z-index:16;">
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<span class="ybgbig">Start Layer</span> <span class="pdetails">data-actions='[{"event":"click","action":"startlayer",
"layer":"slide-416-layer-2", "delay":"200"}]'</span>
</div>
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<span class="ybgbig">Stop Layer</span> <span class="pdetails">data-actions='[{"event":"click","action":"stoplayer",
"layer":"slide-416-layer-2", "delay":"200"}]'</span>
</div>
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<span class="ybgbig">Toggle Layer</span> <span class=
"pdetails">data-actions='[{"event":"click","action":"togglelayer","layerstatus":"visible","layer":"slide-416-layer-2","delay":"200"}]'</span>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>event: defines the Event which triggers the action. It can be <strong>click</strong>, <strong>mouseenter</strong>,
<strong>mouseleave</strong></p>
<p>layer: the Id of the Layer which is triggered due the Action. (Note, you will need to set for each Layer an ID which can be
triggered, or which can trigger other elements)</p>
<p>layerstatus: “<strong>visible</strong>” or “<strong>hidden</strong>&nbsp;defines how the Triggered Layer should start at very
first time. Only used for Togglelayer action.</p>
<p>&nbsp;</p>
<p><strong>Triggered Layer !</strong>
</p>
<p>In case the Triggered layer should wait for Trigger Actions, you will need to set the data-start, data-end and
data-lasttriggerstarte attributes as follows:</p>
<p><strong>data-start=”bytrigger”</strong> will wait for the Call, Layer will not be visible till it is triggered</p>
<p><strong>data-end=”bytrigger”</strong> will not out animate till the Layer triggered.</p>
<p><strong>data-lasttriggerstate=”keep” / “reset”</strong><br>
reset will always reset the data-start defined status,<br>
keep will show the layer with its last state. If it is out animated, at next loop the layer will be invisible till its triggered
again.</p>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" id="actioncallback" style="z-index:17;">
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="" style="display:block;clear:both;height:50px">
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<h5 class="subdirectory">CallBack</h5>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" style="z-index:18;">
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<span class="ybgbig">CallBack</span> <span class=
"pdetails">data-actions='[{"event":"click","action":"callback","callback":"alert(\"some alert\");"}]'</span>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>event: defines the Event which triggers the action. It can be <strong>click</strong>, <strong>mouseenter</strong>,
<strong>mouseleave</strong></p>
<p>callback:&nbsp;any javascript function which will be triggered on the event.</p>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" id="actionvideo" style="z-index:19;">
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="" style="display:block;clear:both;height:50px">
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<h5 class="subdirectory">Play/Stop/Toggle Video</h5>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" style="z-index:20;">
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<span class="ybgbig">Play Video</span> <span class=
"pdetails">data-actions='[{"event":"click","action":"playvideo","layer":"slide-416-layer-4","delay":""}]'</span>
</div>
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<span class="ybgbig">Stop Video</span> <span class=
"pdetails">data-actions='[{"event":"click","action":"stopvideo","layer":"slide-416-layer-4","delay":""}]'</span>
</div>
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<span class="ybgbig">Toggle Video</span> <span class=
"pdetails">data-actions='[{"event":"click","action":"togglevideo","layer":"slide-416-layer-4","delay":""}]'</span>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>event: defines the Event which triggers the action. It can be <strong>click</strong>, <strong>mouseenter</strong>,
<strong>mouseleave</strong></p>
<p>layer: &nbsp;the Id of the Video Layer which is triggered due the Action. (Note, you will need to set for each Layer an ID which can
be triggered, or which can trigger other elements)</p>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" id="actionclick" style="z-index:21;">
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="" style="display:block;clear:both;height:50px">
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<h5 class="subdirectory">Simulate Click</h5>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" style="z-index:22;">
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<span class="ybgbig">Simulate Click</span> <span class=
"pdetails">data-actions='[{"event":"click","action":"simulateclick","layer":"slide-416-layer-2","delay":""}]'</span>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>event: defines the Event which triggers the action. It can be <strong>click</strong>, <strong>mouseenter</strong>,
<strong>mouseleave</strong></p>
<p>layer: &nbsp;the Id of the Layer which is triggered due the Action. (Note, you will need to set for each Layer an ID which can be
triggered, or which can trigger other elements)</p>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" id="actionclass" style="z-index:23;">
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="" style="display:block;clear:both;height:50px">
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<h5 class="subdirectory">Toggle Layer Class</h5>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" style="z-index:24;">
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="wpb_wrapper">
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<span class="ybgbig">Toggle Class</span> <span class=
"pdetails">data-actions='[{"event":"click","action":"toggleclass","layer":"slide-416-layer-2","delay":"","classname":"test"}]]'</span>
</div>
</div>
<div class="wpb_text_column wpb_content_element">
<div class="wpb_wrapper">
<p>event: defines the Event which triggers the action. It can be <strong>click</strong>, <strong>mouseenter</strong>,
<strong>mouseleave</strong></p>
<p>layer: &nbsp;the Id of the Layer which is triggered due the Action. (Note, you will need to set for each Layer an ID which can be
triggered, or which can trigger other elements)</p>
<p>classname: the name of the class which should be added or removed (toggled) from the target Layer.</p>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
<section class="tp_vc_mw_rowwrapper" style="z-index:25;">
<article class="tp_vc_mw_rowinner darkonlight" style="padding-top: 0px ; padding-bottom: 0px;">
<div class="rowbgimage_overlay" style="background-color:transparent;">
</div>
<div class="content_max_width">
<div class="vc_row wpb_row vc_row-fluid vc_general vc_parallax vc_parallax-on" data-vc-parallax="1.5">
<div class="wpb_column vc_column_container vc_col-sm-6">
<div class="wpb_wrapper">
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<a class="tp-btn tp-large-button-yellow" href="layers.html" target="_self"><i class=
"pe-7s-angle-left"></i> Back</a>
</div>
</div>
</div>
</div>
<div class="wpb_column vc_column_container vc_col-sm-6">
<div class="wpb_wrapper">
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
<div class="wpb_wrapper">
<div style="text-align:right">
<a class="tp-btn tp-large-button-yellow" href="layer-animations.html" target="_self">Next
<i class="pe-7s-angle-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="vc_parallax-inner skrollable skrollable-before" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; top: -50%;">
</div>
</div>
<div style="clear:both">
</div>
</div>
</article>
</section>
</div>
</div>
<div class="bottomspacer" style="height:35px;">
</div>
</section>
<section class="sidebar_widget" id="sidebar-container">
<div class="widget-1 first clear">
</div>
<div class="widget-1 first miami_widget sidebar_widget widget_text" id="text-15">
<div class="textwidget">
<span style="background:#000; color:#fff; font-size:16px; font-weight:500; padding:0px 5px; line-height:22px;margin-bottom:5px">Slider Revolution 5.0 jQuery</span>
<span style="background:#000; color:#fff; font-size:16px; font-weight:500; padding:0px 5px; line-height:22px;">Documentation</span>
</div>
<div class="clear">
</div>
</div>
<div class="widget-2 last clear">
</div>
<div class="widget-2 last miami_widget sidebar_widget widget_nav_menu" id="nav_menu-2">
<div class="menu-revslider-jquery-doc-container">
<ul class="menu" id="menu-revslider-jquery-doc">
<li class="menu-item menu-item-type-post_type menu-item-object-revsliderjquery-doc menu-item-has-children darknav docuwithsubmenu" data-backgroundcolor=
"rgba(37,37,37,1)" id="menu-item-6109">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="get-started/">Get Started</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6116">
<a class="menu-link docu-link" href="get-started.html#introduction">Introduction</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6117">
<a class="menu-link docu-link" href="get-started.html#neededfiles">Needed Folders</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6118">
<a class="menu-link docu-link" href="get-started.html#installslider">Installing the Slider</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6119">
<a class="menu-link docu-link" href="get-started.html#markup">The Markup</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6120">
<a class="menu-link docu-link" href="get-started.html#initialising">Initialising The Slider</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-revsliderjquery-doc menu-item-has-children darknav docuwithsubmenu" data-backgroundcolor=
"rgba(37,37,37,1)" id="menu-item-6122">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="anatomy/">Anatomy of Slider Revolution</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6133">
<a class="menu-link docu-link" href="anatomy.html#components">Slider Components</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6128">
<a class="menu-link docu-link" href="anatomy.html#grid">Layer Grid</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6129">
<a class="menu-link docu-link" href="anatomy.html#gridvsslider">Layer Grid vs. Slider</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children darknav docuwithsubmenu" data-backgroundcolor="rgba(37,37,37,1)" id=
"menu-item-6132">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="slider.html#slider">Slider</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6229">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="slider.html#slidertype">Slider Types</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6130">
<a class="menu-link docu-link" href="slider.html#standard">Standard</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6131">
<a class="menu-link docu-link" href="slider.html#hero">Hero Block</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6135">
<a class="menu-link docu-link" href="slider.html#carousel">Carousel</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6231">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="slider.html#sliderlayout">Slider Layouts</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6230">
<a class="menu-link docu-link" href="slider.html#auto">Auto Width</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6232">
<a class="menu-link docu-link" href="slider.html#fullwidth">Fullwidth</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6233">
<a class="menu-link docu-link" href="slider.html#fullscreen">Fullscreen</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6236">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="slider.html#slidersize">Advanced Sizing</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6328">
<a class="menu-link docu-link" href="slider.html#gridsize">Grid Sizing</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6329">
<a class="menu-link docu-link" href="slider.html#aspectratio">Respect Aspect Ratio</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6330">
<a class="menu-link docu-link" href="slider.html#minimumheight">Minimum Height</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6331">
<a class="menu-link docu-link" href="slider.html#responsivelevels">Responsive Levels</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-revsliderjquery-doc menu-item-has-children darknav docuwithsubmenu" data-backgroundcolor=
"rgba(37,37,37,1)" id="menu-item-6239">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="slidersettings/">Slider Settings Overview</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6289">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="slidersettings.html#layoutandsize">Layouts &amp; Sizing</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6290">
<a class="menu-link docu-link" href="slidersettings.html#sliderType">sliderType</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6291">
<a class="menu-link docu-link" href="slidersettings.html#sliderLayout">sliderLayout</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6292">
<a class="menu-link docu-link" href="slidersettings.html#responsiveLevels">responsiveLevels</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6293">
<a class="menu-link docu-link" href="slidersettings.html#gridwidth">gridwidth</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6294">
<a class="menu-link docu-link" href="slidersettings.html#gridheight">gridheight</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6295">
<a class="menu-link docu-link" href="slidersettings.html#autoHeight">autoHeight</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6296">
<a class="menu-link docu-link" href="slidersettings.html#minHeight">minHeight</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6297">
<a class="menu-link docu-link" href=
"slidersettings.html#fullScreenAlignForce">fullScreenAlignForce</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6298">
<a class="menu-link docu-link" href=
"slidersettings.html#fullScreenOffsetContainer">fullScreenOffsetContainer</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6299">
<a class="menu-link docu-link" href="slidersettings.html#fullScreenOffset">fullScreenOffset</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6300">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="slidersettings.html#progressing">Progressing</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6301">
<a class="menu-link docu-link" href="slidersettings.html#delay">delay</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6302">
<a class="menu-link docu-link" href="slidersettings.html#disableProgressBar">disableProgressBar</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6303">
<a class="menu-link docu-link" href="slidersettings.html#startDelay">startDelay</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6304">
<a class="menu-link docu-link" href="slidersettings.html#stopAfterLoops">stopAfterLoops</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6305">
<a class="menu-link docu-link" href="slidersettings.html#stopAtSlide">stopAtSlide</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6306">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="slidersettings.html#viewPort">viewPort</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6307">
<a class="menu-link docu-link" href="slidersettings.html#viewPort">enable</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6308">
<a class="menu-link docu-link" href="slidersettings.html#viewPort">outof</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6309">
<a class="menu-link docu-link" href="slidersettings.html#viewPort">visible_area</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6310">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="slidersettings.html#lazyType">Lazy Loading</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6311">
<a class="menu-link docu-link" href="slidersettings.html#lazyType">lazyType</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6312">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="slidersettings.html#appandvis">Appearance and Visibility</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6313">
<a class="menu-link docu-link" href="slidersettings.html#dottedOverlay">dottedOverlay</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6314">
<a class="menu-link docu-link" href="slidersettings.html#shado">shadow</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6315">
<a class="menu-link docu-link" href="slidersettings.html#spinner">spinner</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6316">
<a class="menu-link docu-link" href=
"slidersettings.html#hideAllCaptionAtLimit">hideAllCaptionAtLimit</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6317">
<a class="menu-link docu-link" href="slidersettings.html#hideCaptionAtLimit">hideCaptionAtLimit</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6318">
<a class="menu-link docu-link" href="slidersettings.html#hideSliderAtLimit">hideSliderAtLimit</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6319">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="slidersettings.html#generalsettings">General Settings</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6320">
<a class="menu-link docu-link" href="slidersettings.html#debugMode">debugMode</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6321">
<a class="menu-link docu-link" href="slidersettings.html#extensions">extensions</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6322">
<a class="menu-link docu-link" href="slidersettings.html#extensions_suffix">extensions_suffix</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6323">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="slidersettings.html#fallbacks">fallbacks</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6324">
<a class="menu-link docu-link" href=
"slidersettings.html#fallbacks">panZoomDisableOnMobile</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6325">
<a class="menu-link docu-link" href="slidersettings.html#fallbacks">simplifyAll</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6326">
<a class="menu-link docu-link" href=
"slidersettings.html#fallbacks">nextSlideOnWindowFocus</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6327">
<a class="menu-link docu-link" href="slidersettings.html#fallbacks">disableFocusListener</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6332">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="slidersettings.html#parallax">Parallax Effect</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6339">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="slidersettings.html#parallax">parallax</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6333">
<a class="menu-link docu-link" href="slidersettings.html#parallax">type</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6334">
<a class="menu-link docu-link" href="slidersettings.html#parallax">levels</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6335">
<a class="menu-link docu-link" href="slidersettings.html#parallax">origo</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6336">
<a class="menu-link docu-link" href="slidersettings.html#parallax">speed</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6337">
<a class="menu-link docu-link" href="slidersettings.html#parallax">bgparallax</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6338">
<a class="menu-link docu-link" href="slidersettings.html#parallax">disable_onmobile</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6681">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">Carousel Settings</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6682">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">Carousel</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6683">
<a class="menu-link docu-link" href=
"slidersettings.html#carouselsettings">horizontal_align</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6684">
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">vertical_align</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6685">
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">infinity</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6686">
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">space</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6687">
<a class="menu-link docu-link" href=
"slidersettings.html#carouselsettings">maxVisibleItems</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6688">
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">stretch</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6689">
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">fadeout</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6690">
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">maxRotation</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6691">
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">minScale</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6692">
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">vary_fade</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6693">
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">vary_rotation</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6694">
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">vary_scale</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6695">
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">border_radius</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6696">
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">padding_top</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6697">
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">padding_bottom</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-revsliderjquery-doc menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6700">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="navigation-settings-overview/">Navigation Settings</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6701">
<a class="menu-link docu-link" href=
"navigation-settings-overview.html#generalnavigationsettings">keyboardNavigation</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6702">
<a class="menu-link docu-link" href=
"navigation-settings-overview.html#generalnavigationsettings">keyboard_direction</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6703">
<a class="menu-link docu-link" href=
"navigation-settings-overview.html#generalnavigationsettings">mouseScrollNavigation</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6704">
<a class="menu-link docu-link" href=
"navigation-settings-overview.html#generalnavigationsettings">onHoverStop</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6705">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="navigation-settings-overview.html#touchsettings">touch</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6706">
<a class="menu-link docu-link" href=
"navigation-settings-overview.html#touchsettings">touchenabled</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6707">
<a class="menu-link docu-link" href=
"navigation-settings-overview.html#touchsettings">swipe_treshold</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6708">
<a class="menu-link docu-link" href=
"navigation-settings-overview.html#touchsettings">swipe_min_touches</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6709">
<a class="menu-link docu-link" href=
"navigation-settings-overview.html#touchsettings">drag_block_vertical</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6710">
<a class="menu-link docu-link" href=
"navigation-settings-overview.html#touchsettings">swipe_direction</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6761">
<a class="menu-link docu-link" href="navigation-settings-overview.html#arrowssettings">arrows</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6762">
<a class="menu-link docu-link" href="navigation-settings-overview.html#bulletssettings">bullets</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6763">
<a class="menu-link docu-link" href="navigation-settings-overview.html#thumbssettings">thumbnails</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6764">
<a class="menu-link docu-link" href="navigation-settings-overview.html#tabssettings">tabs</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-revsliderjquery-doc menu-item-has-children darknav docuwithsubmenu" data-backgroundcolor=
"rgba(37,37,37,1)" id="menu-item-6785">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="slides/">Slides</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6786">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="slides.html#markup">Slide Basics</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6787">
<a class="menu-link docu-link" href="slides.html#markup">Markup</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6788">
<a class="menu-link docu-link" href="slides.html#settings">Settings Overview</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-6921">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="slides/">Slide Types</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6922">
<a class="menu-link docu-link" href="slides.html#imagebg">Image Background</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6923">
<a class="menu-link docu-link" href="slides.html#videobg">Video Background</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6932">
<a class="menu-link docu-link" href="slides.html#solidcolorbg">Solid Color Background</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6934">
<a class="menu-link docu-link" href="slides.html#transparentbg">Transparent Background</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6935">
<a class="menu-link docu-link" href="slides.html#linkandseo">Link &amp; Seo</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6933">
<a class="menu-link docu-link" href="slides.html#kenburns">Ken Burns Effect</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6936">
<a class="menu-link docu-link" href="slides.html#parallax">Parallax Effect</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6937">
<a class="menu-link docu-link" href="slides.html#easetable">Ease Table</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-6938">
<a class="menu-link docu-link" href="slides.html#transitiontable">Transition Table</a>
</li>
</ul>
</li>
<li class=
"menu-item menu-item-type-post_type menu-item-object-revsliderjquery-doc current-menu-ancestor current-menu-parent menu-item-has-children darknav docuwithsubmenu"
data-backgroundcolor="rgba(37,37,37,1)" id="menu-item-6941">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="layers/">Layers</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-7037">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="layers.html#layermarkup">Layer Basics</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7038">
<a class="menu-link docu-link" href="layers.html#layermarkup">Layer Markup</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7039">
<a class="menu-link docu-link" href="layers.html#layersettings">Settings Overview</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-7040">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="layers.html#layertypes">Layer Types</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7041">
<a class="menu-link docu-link" href="layers.html#htmllayer">HTML Layer</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7042">
<a class="menu-link docu-link" href="layers.html#imagelayer">Image Layer</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7043">
<a class="menu-link docu-link" href="layers.html#videolayer">Video Layer</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7044">
<a class="menu-link docu-link" href="layers.html#shapelayer">Shape Layer</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7045">
<a class="menu-link docu-link" href="layers.html#buttonlayer">Button Layer</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7156">
<a class="menu-link docu-link" href="layers.html#staticlayers">Static Layers</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current-menu-ancestor" id="menu-item-7081">
<a class="menu-link docu-link" href="layer-actions.html#traditionallink">Layer Hyperlink Traditional</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7190">
<a class="menu-link docu-link" href="layers.html#parallaxlayer">Parallax Effect</a>
</li>
<li class=
"menu-item menu-item-type-custom menu-item-object-custom current-menu-item current-menu-ancestor current-menu-parent menu-item-has-children hassubmenu docuwithsubmenu"
id="menu-item-7080">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="layer-actions/">Layer Actions</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-7082">
<a class="menu-link docu-link" href="layer-actions.html#actionsyntax">Layer Action Syntax</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-7083">
<a class="menu-link docu-link" href="layer-actions.html#actionlinks">Action Links
(Internal,external)</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-7084">
<a class="menu-link docu-link" href="layer-actions.html#actionslider">Play/Pause/Toggle Slider</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-7085">
<a class="menu-link docu-link" href="layer-actions.html#actionlayer">Start/Stop/Toggle Layer</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-7086">
<a class="menu-link docu-link" href="layer-actions.html#actioncallback">Layer CallBack</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-7087">
<a class="menu-link docu-link" href="layer-actions.html#actionvideo">Play/Pause/Toggle Video</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-7088">
<a class="menu-link docu-link" href="layer-actions.html#actionclick">Simulate Click</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-7089">
<a class="menu-link docu-link" href="layer-actions.html#actionclass">Toggle Class</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-7090">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="layer-animations/">Layer Animations</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7091">
<a class="menu-link docu-link" href="layer-animations.html#transidle">Idle State</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7092">
<a class="menu-link docu-link" href="layer-animations.html#transhover">Hover State &amp; Hover
Style</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7093">
<a class="menu-link docu-link" href="layer-animations.html#transin">“In” Animation</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7094">
<a class="menu-link docu-link" href="layer-animations.html#transout">“Out” Animation</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7095">
<a class="menu-link docu-link" href="layer-animations.html#transmaskin">Mask “in” Animation</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7096">
<a class="menu-link docu-link" href="layer-animations.html#transmaskout">Mask “out” Animation</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children hassubmenu docuwithsubmenu" id="menu-item-7101">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="layer-animations.html#loopmarkup">Layer Loop Animations</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7102">
<a class="menu-link docu-link" href="layer-animations.html#loopmarkup">Loop Basics</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7104">
<a class="menu-link docu-link" href="layer-animations.html#looptype">Loop Types</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children darknav docuwithsubmenu" data-backgroundcolor="rgba(37,37,37,1)" id=
"menu-item-7127">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="navigation/">Navigation</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7128">
<a class="menu-link docu-link" href="navigation.html#navbasic">Basics</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7129">
<a class="menu-link docu-link" href="navigation.html#navarrows">Arrows</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7130">
<a class="menu-link docu-link" href="navigation.html#navbullets">Bullets</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7131">
<a class="menu-link docu-link" href="navigation.html#navthumb">Thumbnails</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7132">
<a class="menu-link docu-link" href="navigation.html#navtabs">Tabs</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children darknav docuwithsubmenu" data-backgroundcolor="rgba(37,37,37,1)" id=
"menu-item-7171">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="api/">API</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7173">
<a class="menu-link docu-link" href="api/">Basics</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7172">
<a class="menu-link docu-link" href="api.html#apimethods">Methods</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7174">
<a class="menu-link docu-link" href="api.html#apievents">Events</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children darknav docuwithsubmenu"
data-backgroundcolor="rgba(37,37,37,1)" id="menu-item-7176">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="get-started/">Hyperlinking Slides &amp; Layers</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7177">
<a class="menu-link docu-link" href="slides.html#datalink">Slide Link</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-7178">
<a class="menu-link docu-link" href="layer-actions.html#traditionallink">Layer Traditional Link</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item" id="menu-item-7179">
<a class="menu-link docu-link" href="layer-actions.html#actionlinks">Layer Action Link</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children darknav docuwithsubmenu" data-backgroundcolor="rgba(37,37,37,1)" id=
"menu-item-7180">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="slides.html#videobg">Video Content</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7181">
<a class="menu-link docu-link" href="slides.html#videobg">Video as Background</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7182">
<a class="menu-link docu-link" href="layers.html#videolayer">Video as Layer</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children darknav docuwithsubmenu" data-backgroundcolor="rgba(37,37,37,1)" id=
"menu-item-7183">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="slider/">Special Features</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7184">
<a class="menu-link docu-link" href="slider.html#carousel">Carousel</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7185">
<a class="menu-link docu-link" href="slidersettings.html#carouselsettings">Carousel Settings</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7186">
<a class="menu-link docu-link" href="slides.html#kenburns">Ken Burns Effect</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7187">
<a class="menu-link docu-link" href="slides.html#parallax">Parallax Effect Slide BG</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7191">
<a class="menu-link docu-link" href="layers.html#parallaxlayer">Parallax Effect Layer</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7192">
<a class="menu-link docu-link" href="slidersettings.html#viewPort">Pause/Resume Slider on Scroll</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children darknav docuwithsubmenu" data-backgroundcolor="rgba(37,37,37,1)" id=
"menu-item-7193">
<div class="menu-expander icon-angle-right" style="font-style: italic">
</div>
<a class="menu-link docu-link" href="updates">Updates &amp; Support</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7195">
<a class="menu-link docu-link" href="updates">How to Update the Plugin</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom" id="menu-item-7194">
<a class="menu-link docu-link" href="http://www.themepunch.com/support-center/">Support Center</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="clear">
</div>
</div>
</section>
</div>
<div class="clearfix">
</div>
</section>
</article>
</article>
<link href="assets/tp_vc_frontend.css" id="vc_extend_style-css" media="all" rel="stylesheet" type="text/css"><script src=
"assets/jquery_006.js" type="text/javascript"></script><script type="text/javascript">
var _wpcf7={"loaderUrl":"http:\/\/www.themepunch.com\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif","sending":"Sending ...","cached":"1"};
</script><script src="assets/scripts.js" type="text/javascript"></script><script src="assets/jquery_002.js" type="text/javascript"></script><script src="assets/ZeroClipboard.js" type="text/javascript"></script><script src="assets/main_002.js" type="text/javascript"></script><script src="assets/main.js" type="text/javascript"></script><script type="text/javascript">
var pollsL10n={"ajax_url":"http:\/\/www.themepunch.com\/wp-admin\/admin-ajax.php","text_wait":"Your last request is still being processed. Please wait a while ...","text_valid":"Please choose a valid poll answer.","text_multiple":"Maximum number of choices allowed: ","show_loading":"1","show_fading":"1"};
</script><script src="assets/polls-js.js" type="text/javascript"></script><script src="assets/bootstrap.js" type="text/javascript"></script><script src="assets/retina.js" type="text/javascript"></script><script src="assets/fitvid.js" type="text/javascript"></script><script type="text/javascript">
var miami={"sharrrephp":"http:\/\/www.themepunch.com\/wp-content\/themes\/miami\/assets\/js\/sharrre.php"};
</script><script src="assets/jquery_005.js" type="text/javascript"></script><script src="assets/jquery_008.js" type="text/javascript"></script><script src="assets/jquery_003.js" type="text/javascript"></script><script type="text/javascript">
var tp_search={"search_php":"http:\/\/www.themepunch.com\/wp-content\/themes\/miami\/framework\/theme_get_search_result.php","admin_php":"http:\/\/www.themepunch.com\/wp-admin\/admin-ajax.php","estoken":"f2f550fc0b"};
</script><script src="assets/screen.js" type="text/javascript"></script><script src="assets/comment-reply.js" type="text/javascript"></script><script src="assets/js_composer_front.js" type="text/javascript"></script><script src="assets/skrollr.js" type="text/javascript"></script><script type="text/javascript">
var countVars={"disqusShortname":"themepunch"};
</script><script src="assets/count.js" type="text/javascript"></script>
</body>
</html>