Skip to content

Instantly share code, notes, and snippets.

@MGCodeSnips
Last active January 19, 2017 11:17
Show Gist options
  • Save MGCodeSnips/6efd0228c1db8f6a3fd2772843e903de to your computer and use it in GitHub Desktop.
Save MGCodeSnips/6efd0228c1db8f6a3fd2772843e903de to your computer and use it in GitHub Desktop.
You can use this fader code to add a fader to any theme, You may need to fix the height if the theme does not have the same height script
<script type="text/javascript" src="/ekmps/designs/assets/master/1269/other/jlsminifader.min.js"></script>
<script type="text/javascript">
var $j = jQuery;
$j(window).bind('load', function(){
$j('#welcomebanner').jlsMiniFader({ 'delay':3000, 'duration':500, 'hoverStop':true, 'showControls':false, 'autoStart':true, 'showNavigation':true, 'removeEmptySlides':true, 'hideControlsOnHover':true});
});
</script>
<style>
/*############################ OPTIONAL STYLE ######################################*/
you can use this to set the width and hight of the banner
#welcomebanner {
width: 980px; /* use 100% width if the theme is dynamic */
height: 417px; /* use auto height if the theme is dynamic */
}
/*############################ FADER STYLES ######################################*/
#welcomebanner {position:relative; margin-bottom: 15px;}
#welcomebanner ul, #welcomebanner li {margin:0; padding:0; list-style:none;}
#welcomebanner li {display:none; text-align:center; position:absolute; top:0; left:0; width:100%;}
#welcomebanner li.hidden {position:absolute; left:-10000px; display:block !important;}
#welcomebanner li.first {display:block !important;}
#welcomebanner li.showing {display:block !important; z-index:8;}
#welcomebanner li.pre {z-index:7; display:block !important;}
#welcomebanner div#jlsMiniFader-Controls {position:absolute; top:50%; left:0; margin-top:-20px; width:100%; -moz-user-select:none; -khtml-user-select:none; -webkit-user-select:none; user-select:none;}
#welcomebanner span.control {display:block; height:45px; width:45px; cursor:pointer; text-indent:-10000px; z-index:9;}
#welcomebanner div#jlsMiniFader-Navigation {position:absolute; bottom:0; width:100%; text-align:center; -moz-user-select:none; -khtml-user-select:none; -webkit-user-select:none; user-select:none; z-index:9;}
#welcomebanner div#jlsMiniFader-Navigation span.navigation {display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; margin-bottom:10px; padding:2px 3px; border-radius:20px;}
#welcomebanner div#jlsMiniFader-Navigation span.navigation .page-nav {display:-moz-inline-stack; display:inline-block; zoom:1;*display:inline; vertical-align:middle; background:#333; border-radius:40px; width:10px; height:10px; font-size:0; line-height:1000px; overflow:hidden; margin:0 2px; cursor:pointer; opacity:0.8}
#welcomebanner div#jlsMiniFader-Navigation span.navigation .page-nav.active {background:#ffffff; height:12px; width:12px; opacity:0.8}
#welcomebanner .ekm-edit-button-wrapper {position:absolute!important;}
</style>
<div id="welcomebanner" class="banner">
<ul>
[ekm:element] element_reference='slide-1'; output_start='
<li class="first showing">'; output_end='</li>
'; output_default='<img src="/ekmps/designs/assets/master/1269/[ekm:localisation][/ekm:localisation]/images/banner1[ekm:industry_variant_name]space_replace='-';[/ekm:industry_variant_name].jpg"/>';[/ekm:element]
[ekm:element] element_reference='slide-2'; output_start='
<li class="hidden">'; output_end='</li>
'; output_default='<img src="/ekmps/designs/assets/master/1269/[ekm:localisation][/ekm:localisation]/images/banner2[ekm:industry_variant_name]space_replace='-';[/ekm:industry_variant_name].jpg"/>';[/ekm:element]
[ekm:element] element_reference='slide-3'; output_start='
<li class="hidden">'; output_end='</li>
'; output_default='<img src="/ekmps/designs/assets/master/1269/[ekm:localisation][/ekm:localisation]/images/banner3[ekm:industry_variant_name]space_replace='-';[/ekm:industry_variant_name].jpg"/>';[/ekm:element]
[ekm:element] element_reference='slide-4'; output_start='
<li class="hidden">'; output_end='</li>
'; output_default='<img src="/ekmps/designs/assets/master/1269/[ekm:localisation][/ekm:localisation]/images/banner4[ekm:industry_variant_name]space_replace='-';[/ekm:industry_variant_name].jpg"/>';[/ekm:element]
</ul>
</div>
<!--BANNER-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment