Last active
January 19, 2017 11:17
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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