simongehrig.de/JS-Slider
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Cleanup & Minor improvements

Browse Source 
TODO Selector configuration for easier implementation
This commit is contained in:
Simon Gehrig
2017-02-23 14:04:54 +01:00
parent 457ded1164
commit 7005408804
3 changed files with 77 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bannerslider.js
+44 -27
View File
@@ -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 + ")");
$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(
"<a class='bannerjump bannerjump-" + ($i)
+ "' onclick='jump(" + ($i) + ")'></a>");
"<a class='bannerjump bannerjump-" + ($i) + "' 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') {
// 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
}
slider.css
+22 -29
View File
@@ -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); }
slider.scss
+11 -12
View File
@@ -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;