Cleanup & Minor improvements

TODO Selector configuration for easier implementation

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("<div class='bannerjump-wrapper'></div>");
+
         // TODO Jumps to <a>-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 + ")");
-
+            // get the position-offset in Layout
-            $posoffset = activepos - 1 - $posnr;
+            // 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(
-                    "<a class='bannerjump bannerjump-" + ($i)
+                    "<a class='bannerjump bannerjump-" + ($i) + "' onclick='jump(" + ($i) + ")'></a>"
-                    + "' onclick='jump(" + ($i) + ")'></a>");
+                );
 
                 // 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') {
+    // Pause to avoid multiple Intervals
-    // Scroll on Time
     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
+}

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;
+  background-color: #ADD0D8;
-  border-left: solid 1px #eeeeee;
+  border-left: solid 1px #A5033E;
-  border-right: solid 1px #eeeeee;
+  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-top: solid 4.62px #A5033E;
-      border-right: solid 4.62px #eeeeee;
+      border-right: solid 4.62px #A5033E;
       border-bottom-left-radius: 7.77778px;
-      background: #333333;
       -webkit-transform: rotate(45deg);
-              transform: rotate(45deg);
+              transform: rotate(45deg); }
-      box-shadow: 0 0 4.62px #333333; }
       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-left: solid 4.62px #A5033E;
-      border-right: solid 4.62px #eeeeee;
+      border-right: solid 4.62px #A5033E; }
-      background: #333333;
-      box-shadow: 0 0 4.62px #333333; }
       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;
+      border: solid 4.62px #0C0C0C;
-      background: #eeeeee; }
+      background: #A5033E; }
       div.bannergroup .bannerjump-wrapper .bannerjump.active {
-        background: #333333;
+        background: #0C0C0C;
-        border-color: #eeeeee; }
+        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;
+        border: solid 4.62px #A5033E;
-        background-color: #333333;
+        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-left: solid 4.62px #A5033E;
-          border-top: solid 4.62px #eeeeee;
+          border-top: solid 4.62px #A5033E;
           -webkit-transform: rotate(-45deg);
                   transform: rotate(-45deg); }
 

slider.scss

@@ -12,11 +12,10 @@ $slider_item_width: 61.8%;
 
 $font__main: Calibri, sans-serif;
 
-$highlight-color-1: #333333;
+$highlight-color-1: #0C0C0C; // Darker is better
-$highlight-color-2: #eeeeee;
+$highlight-color-2: #A5033E; // Brighter is better
-
+$text-color: #FFFFFF; // White at best
-$text-color: #ffffff;
+$base-color: #ADD0D8; // Only for (Slider-)Background
-$base-color: #ffffff;
 
 // END CONFIGURATION
 
@@ -126,9 +125,9 @@ div.bannergroup {
       }
 
       img {
-        -webkit-filter: blur(1px);
+        //-webkit-filter: blur(1px);
-        -ms-filter: blur(1px);
+        //-ms-filter: blur(1px);
-        filter: blur(1px) !important;
+        //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;