From 70054088040a3fe398fe874ab973b69d30e6465b Mon Sep 17 00:00:00 2001 From: simongehrig Date: Thu, 23 Feb 2017 14:04:54 +0100 Subject: [PATCH] Cleanup & Minor improvements TODO Selector configuration for easier implementation --- bannerslider.js | 71 ++++++++++++++++++++++++++++++------------------- slider.css | 51 +++++++++++++++-------------------- slider.scss | 23 ++++++++-------- 3 files changed, 77 insertions(+), 68 deletions(-) diff --git a/bannerslider.js b/bannerslider.js index ed9abb7..8349c7c 100644 --- a/bannerslider.js +++ b/bannerslider.js @@ -5,14 +5,13 @@ /* * - * CONFIGURATION + * CONFIGURATION DEFAULTS * * */ slider_aspect = 16 / 10; -//TODO Selectors for Bannergroup & Banneritems + add Bannergroup & -item classes /* * - * END CONFIGURATION + * END CONFIGURATION DEFAULTS * * */ @@ -83,8 +82,6 @@ function Dimensions() { bannergroupwidth = bannergroup[0].clientWidth; banneritemwidth = banneritems[0].clientWidth; - //bannergroupwidth = bannergroup[0].width(); - //banneritemwidth = banneritems[0].width(); // CALCULATE BANNER DIMENSIONS bannerheight = banneritemwidth / slider_aspect; @@ -128,7 +125,9 @@ function banner(activeitem) { // ------------------------------------------------------------------------ // ADD the Jumper-wrapper bannergroup.append("
"); + // TODO Jumps to -top by clicking left/right arrows + // ADD the left/right start/stop controls bannergroup .append( @@ -179,7 +178,6 @@ function banner(activeitem) { bannercontrols_left = $('.bannercontrols .left'); bannercontrols_right = $('.bannercontrols .right'); - bannercontrols_left.css({ position: "absolute", left: '', @@ -210,7 +208,6 @@ function banner(activeitem) { "z-index": "10000" }); - // SET THE BANNERITEMS'POSITIONS // -------------------------------------------------------------- @@ -219,18 +216,20 @@ function banner(activeitem) { for (var $i = 0; $i <= (bannerarraylength); $i++) { // LOGIC TO POSITION THE IMAGES - // - $banneritemnr = $i; $posnr = orderarray[$i]; - + // Get the item for position $i $banneritem = $(".banneritem:eq(" + $banneritemnr + ")"); - - $posoffset = activepos - 1 - $posnr; - + // get the position-offset in Layout + // position 1 is the middle all others are + // aligned around it: + // position 2 is after 1 and the last position + // position n is before it + $posoffset = (activepos - 1) - $posnr; + // calculate the offset based on the position $left = ($posoffset * banneritemwidth) + banneroffset; - // Get optional for styling + // Set CLASSES for styling if (activeitem == $i) { $state = "active"; $removal = "inactive"; @@ -262,11 +261,14 @@ function banner(activeitem) { $banneritem.addClass($state); $banneritem.removeClass($removal); + // + // JUMP CIRCLES if (bannerarraylength > 0) { + // CONSTRUCT THE JUMP-ICONS $('.bannerjump-wrapper').prepend( - ""); + "" + ); // Make the active jumper colored different if (activeitem == $i) { @@ -278,6 +280,7 @@ function banner(activeitem) { //prevent banner iframes from getting too large var iframes = $('.banneritem iframe'); + for (var i = 0; i < iframes.length; i++) { var iframe = iframes[i]; iframe.removeAttribute('height'); @@ -288,7 +291,6 @@ function banner(activeitem) { } function resetcss() { - bannercontrols_left.css({ left: '', top: '', @@ -310,8 +312,6 @@ function resetcss() { width: '', height: '' }); - //banneritems.attribute('style',''); - //bannergroup.attr('style',''); } function pause() { @@ -320,19 +320,21 @@ function pause() { window.clearInterval(bannerautoslide); } } + function play() { // Play Button Press - scrollL(); + scrollR(); start(); } + function start() { - //if (typeof bannerautoslide == 'undefined') { - // Scroll on Time + // Pause to avoid multiple Intervals pause(); + + // Scroll on Time bannerautoslide = window.setInterval(function () { - scrollL(); + scrollR(); }, 7500); - //} } // jump to specific Banneritem @@ -344,6 +346,8 @@ function jump($activeitem) { // JUMP to chosen Item activeitem = $activeitem; + + // Reorder order(activeitem); })(jQuery); } @@ -390,33 +394,46 @@ function scrollR() { // TODO Set images as background-images function order($item) { - //if ($item != null) { - // activeitem = 0; - //} + // Variables banneritems = $('.banneritem'); orderarray = new Array(); // Calculate the center Position activepos = Math.round(banneritems.length / 2); + // Get all item Numbers in an Array of the positions for (i = 0; i < banneritems.length; i++) { orderarray[i] = i; } + + // Rotate the Array by the Number of the middle position + // plus the number of the active item for (j = 0; j < activepos + activeitem; j++) { orderarray.unshift(orderarray.pop()); } + + // Execute the maintenance function (Dimensions & Banner arrangement) maintenance(); } function notransitions() { + // remove the transitions set in css + // by overwriting them in Element $('.bannergroup *').css({ transition: "none" }) } function yestransitions() { + // remove the transitions set in Element + // to make the ones set in css work again $('.bannergroup *').css({ transition: "" }) +} + +function sg_slider_config($aspect) { + slider_aspect = $aspect; + //TODO make selectors configurable and add original selectors to elements } \ No newline at end of file diff --git a/slider.css b/slider.css index d7ab02c..db2e5c3 100644 --- a/slider.css +++ b/slider.css @@ -61,22 +61,22 @@ header { left: 12.5%; position: fixed; height: 200px; - background-color: #333333; + background-color: #0C0C0C; z-index: 1000; } header .brand { display: block; font-size: 100px; font-weight: 700; padding: 25px 50px !important; - color: #ffffff; + color: #ADD0D8; text-transform: uppercase; } div#content { width: 75%; margin: 200px auto 0 auto; - background-color: #ffffff; - border-left: solid 1px #eeeeee; - border-right: solid 1px #eeeeee; + background-color: #ADD0D8; + border-left: solid 1px #A5033E; + border-right: solid 1px #A5033E; box-sizing: border-box; padding-bottom: 120px; } div#content .text { @@ -91,7 +91,7 @@ footer { right: 0; height: 100px; width: 100%; - background-color: #eeeeee; + background-color: #A5033E; text-align: center; } footer span { display: table-cell; @@ -105,7 +105,7 @@ div.bannergroup { margin: 0 auto; padding: 0 !important; overflow: hidden; - background-color: #ffffff; } + background-color: #ADD0D8; } div.bannergroup .banneritem { position: absolute; overflow: hidden; @@ -128,9 +128,6 @@ div.bannergroup { div.bannergroup .banneritem.inactive.visible { z-index: 95; } div.bannergroup .banneritem.inactive img { - -webkit-filter: blur(1px); - -ms-filter: blur(1px); - filter: blur(1px) !important; -webkit-transform: scale(1.1); transform: scale(1.1); } div.bannergroup .banneritem img { @@ -160,7 +157,7 @@ div.bannergroup { line-height: 56px; font-family: Calibri, sans-serif; font-size: 42px; - color: #ffffff; + color: #FFFFFF; text-shadow: 0px 0px 4.62px #000; background: transparent !important; } div.bannergroup .banneritem @@ -185,13 +182,11 @@ div.bannergroup { width: 7.77778px !important; height: 7.77778px; margin: 0 9.24px -2px 0; - border-top: solid 4.62px #eeeeee; - border-right: solid 4.62px #eeeeee; + border-top: solid 4.62px #A5033E; + border-right: solid 4.62px #A5033E; border-bottom-left-radius: 7.77778px; - background: #333333; -webkit-transform: rotate(45deg); - transform: rotate(45deg); - box-shadow: 0 0 4.62px #333333; } + transform: rotate(45deg); } div.bannergroup .bannerautoplay .play:first-of-type { margin-left: 0; } div.bannergroup .bannerautoplay .play:last-of-type { @@ -201,10 +196,8 @@ div.bannergroup { height: 14px; width: 4.62px !important; margin: 0 9.24px -4px 0; - border-left: solid 4.62px #eeeeee; - border-right: solid 4.62px #eeeeee; - background: #333333; - box-shadow: 0 0 4.62px #333333; } + border-left: solid 4.62px #A5033E; + border-right: solid 4.62px #A5033E; } div.bannergroup .bannerautoplay .pause:first-of-type { margin-left: 0; } div.bannergroup .bannerautoplay .pause:last-of-type { @@ -223,11 +216,11 @@ div.bannergroup { height: 4.62px; margin: 0 9.24px -4px 0; border-radius: 9.24px; - border: solid 4.62px #333333; - background: #eeeeee; } + border: solid 4.62px #0C0C0C; + background: #A5033E; } div.bannergroup .bannerjump-wrapper .bannerjump.active { - background: #333333; - border-color: #eeeeee; } + background: #0C0C0C; + border-color: #A5033E; } div.bannergroup .bannerjump-wrapper .bannerjump:first-of-type { margin-left: 0; } div.bannergroup .bannerjump-wrapper .bannerjump:last-of-type { @@ -262,10 +255,10 @@ div.bannergroup { height: 46.62px; margin: 0 auto; border-radius: 46.62px; - border: solid 4.62px #eeeeee; - background-color: #333333; + border: solid 4.62px #A5033E; + background-color: #0C0C0C; opacity: 1; - box-shadow: 0 0 4.62px #333333; } + box-shadow: 0 0 4.62px #0C0C0C; } div.bannergroup .bannercontrols .iconwrapper .circle .arrow { display: block; position: absolute; @@ -273,8 +266,8 @@ div.bannergroup { top: 30%; width: 15.54px; height: 15.54px; - border-left: solid 4.62px #eeeeee; - border-top: solid 4.62px #eeeeee; + border-left: solid 4.62px #A5033E; + border-top: solid 4.62px #A5033E; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } diff --git a/slider.scss b/slider.scss index a593d04..2fe633b 100644 --- a/slider.scss +++ b/slider.scss @@ -12,11 +12,10 @@ $slider_item_width: 61.8%; $font__main: Calibri, sans-serif; -$highlight-color-1: #333333; -$highlight-color-2: #eeeeee; - -$text-color: #ffffff; -$base-color: #ffffff; +$highlight-color-1: #0C0C0C; // Darker is better +$highlight-color-2: #A5033E; // Brighter is better +$text-color: #FFFFFF; // White at best +$base-color: #ADD0D8; // Only for (Slider-)Background // END CONFIGURATION @@ -126,9 +125,9 @@ div.bannergroup { } img { - -webkit-filter: blur(1px); - -ms-filter: blur(1px); - filter: blur(1px) !important; + //-webkit-filter: blur(1px); + //-ms-filter: blur(1px); + //filter: blur(1px) !important; -webkit-transform: scale(1.1); transform: scale(1.1); @@ -211,10 +210,10 @@ div.bannergroup { border-top: solid 0.33*$base-size $highlight-color-2; border-right: solid 0.33*$base-size $highlight-color-2; border-bottom-left-radius: $base-size/1.8; - background: $highlight-color-1; + //background: $highlight-color-1; transform: rotate(45deg); - box-shadow: 0 0 0.33*$base-size $highlight-color-1; + //box-shadow: 0 0 0.33*$base-size $highlight-color-1; &:first-of-type { margin-left: 0; @@ -233,9 +232,9 @@ div.bannergroup { border-left: solid 0.33*$base-size $highlight-color-2; border-right: solid 0.33*$base-size $highlight-color-2; - background: $highlight-color-1; + //background: $highlight-color-1; - box-shadow: 0 0 0.33*$base-size $highlight-color-1; + //box-shadow: 0 0 0.33*$base-size $highlight-color-1; &:first-of-type { margin-left: 0;