From 8c7959d1d439df35f5edca292010783d0e620621 Mon Sep 17 00:00:00 2001 From: simongehrig Date: Thu, 23 Feb 2017 12:12:01 +0100 Subject: [PATCH] Added new Logic to position image which fixes the z-index problem. Added Start/Stop Buttons Added css reset for resizing the window Added transition reset for resizing and page loading TODO Selector configuration for easier implementation --- bannerslider.js | 280 +++++++++++++++++++++++++++------------ slider.html | 20 ++- slider.scss | 344 ++++++++++++++++++++++++++++-------------------- 3 files changed, 411 insertions(+), 233 deletions(-) diff --git a/bannerslider.js b/bannerslider.js index ccf4d86..ed9abb7 100644 --- a/bannerslider.js +++ b/bannerslider.js @@ -1,22 +1,42 @@ /** - * + * SIMON GEHRIGs Slider */ + + +/* + * + * CONFIGURATION + * + * */ +slider_aspect = 16 / 10; +//TODO Selectors for Bannergroup & Banneritems + add Bannergroup & -item classes +/* + * + * END CONFIGURATION + * + * */ + + +// Global Variables +msie = window.navigator.userAgent.indexOf("msie "); activeitem = 0; -// WHEN DOCUMENT IS LOADING -(function ($) { - - // TODO Trigger Prepare Function - // TODO Write Prepare Function - -})(jQuery); - // WHEN DOCUMENT IS READY (function ($) { $(document).ready(function () { - maintenance(); - maintenance(); + + notransitions(); + + order(activeitem); + + start(); + + if (msie) { + order(activeitem); + } + + yestransitions(); }) })(jQuery); @@ -24,8 +44,15 @@ activeitem = 0; // IF WINDOW GETS RESIZED (function ($) { $(window).resize(function () { + resetcss(); - maintenance(); + + notransitions(); + + order(activeitem); + + yestransitions(); + }) })(jQuery); @@ -33,7 +60,7 @@ activeitem = 0; // LIST OF ALL FUNCTIONS TRIGGERED ABOVE function maintenance() { Dimensions(); - banner(); + banner(activeitem); } // ----------------------------------------- @@ -48,22 +75,20 @@ function Dimensions() { banneroffset = null; // Get jQuery Objects + bannergroup = ''; bannergroup = $('.bannergroup'); - banneritem = $('.banneritem'); - // TODO Reset the CSS Properties - banneritem.css({ - width: '', - height: '', - left: '' - }); + banneritems = ''; + banneritems = $('.banneritem'); bannergroupwidth = bannergroup[0].clientWidth; - banneritemwidth = banneritem[0].clientWidth; + banneritemwidth = banneritems[0].clientWidth; + //bannergroupwidth = bannergroup[0].width(); + //banneritemwidth = banneritems[0].width(); // CALCULATE BANNER DIMENSIONS - bannerheight = banneritemwidth / 1.5; - banneroffset = (bannergroupwidth-banneritemwidth)/2; + bannerheight = banneritemwidth / slider_aspect; + banneroffset = (bannergroupwidth - banneritemwidth) / 2; })(jQuery); @@ -84,9 +109,10 @@ function banner(activeitem) { // Get the Control Elements bannerjump_wrapper = $('.bannerjump-wrapper'); bannercontrols = $('.bannercontrols'); + bannerautoplay = $('.bannerautoplay'); // Make the banner arraylength more comfortable to calculate in the loop - bannerarraylength = banneritem.length - 1; + bannerarraylength = banneritems.length - 1; // ----------------------------------------------------------------------- // HTML @@ -96,16 +122,42 @@ function banner(activeitem) { // ------------------------------------------------------------------------ bannerjump_wrapper.detach(); bannercontrols.detach(); + bannerautoplay.detach(); // ADD THE CONTROLS // ------------------------------------------------------------------------ // ADD the Jumper-wrapper bannergroup.append("
"); - - // ADD the left/right controls + // TODO Jumps to -top by clicking left/right arrows + // ADD the left/right start/stop controls bannergroup .append( - "
"); + "
" + + "" + + " " + + "
" + + "" + + "
" + + "" + + "" + + "
" + + "" + + "" + + "" + + "" + + "
" + + "" + + "" + + "" + + "
" + + "" + + "" + + "" + + "" + + "
" + + "" + + "" + + "
"); // SET BANNER DIMENSIONS @@ -113,11 +165,7 @@ function banner(activeitem) { bannergroup.css({ height: bannerheight }); - $('.banneritem, .banneritem iframe').css({ - width: banneritemwidth, - height: bannerheight, - left: banneroffset - }); + $('.banneritem a').css({ width: banneritemwidth, height: bannerheight @@ -162,61 +210,31 @@ function banner(activeitem) { "z-index": "10000" }); + // SET THE BANNERITEMS'POSITIONS // -------------------------------------------------------------- - + // LOOP THROUGH ALL ITEMS - // ---------------------------------------------------------------------- for (var $i = 0; $i <= (bannerarraylength); $i++) { - $banneritem_nth = $('.banneritem:nth-of-type(' + ($i + 1) + ')'); - - // GET the image height of the specific image - $imageheight = $banneritem_nth - .height(); - - // LOGIC TO POSITION THE IMAGES // - // IF THE FIRST SLIDER IS ACTIVE, THE LAST ONE GETS SET - // IN FRONT OF IT - if (parseInt($i) == parseInt(bannerarraylength) - && activeitem == 0 - && parseInt(bannerarraylength) != 0) { - // put it on the right side - $left = banneroffset + banneritemwidth; - } - // IF THE LAST SLIDER IS ACTIVE, THE FIRST ONE GETS SET AFTER IT - else if ($i == 0 - && activeitem == bannerarraylength - && bannerarraylength != 0) { - // put it on the left side - $left = -1 * (banneritemwidth - banneroffset); - } - // IN ANY OTHER CASE, LINE THEM UP AROUND THE ACTIVE ELEMENT - else { - $activeoffset = activeitem - $i; - $timesthebanner = banneritemwidth * $activeoffset; - $left = $timesthebanner + banneroffset; - } + $banneritemnr = $i; + $posnr = orderarray[$i]; + $banneritem = $(".banneritem:eq(" + $banneritemnr + ")"); - // SET THE VALUES CALCULATED IN THE LOGIC - $banneritem_nth.css({ - "left": $left, - "width": banneritemwidth, - "height": bannerheight - //"opacity": 1 - }); + $posoffset = activepos - 1 - $posnr; + $left = ($posoffset * banneritemwidth) + banneroffset; + // Get optional for styling if (activeitem == $i) { $state = "active"; $removal = "inactive"; } - //TODO Calculate how many pictures can be seen else if ((activeitem - 1) == $i || activeitem + 1 == $i) { $state = "inactive visible"; $removal = "active"; @@ -234,12 +252,16 @@ function banner(activeitem) { $removal = "active visible"; } - $banneritem_nth.addClass($state); - $banneritem_nth.removeClass($removal); + // SET THE VALUES CALCULATED IN THE LOGIC + $banneritem.css({ + "left": $left, + "width": banneritemwidth, + "height": bannerheight + }); + + $banneritem.addClass($state); + $banneritem.removeClass($removal); - //$('.banneritem:nth-of-type(' + ($i + 1) + ') img').css({ - // "top": (bannerheight - $imageheight) / 2 - //}) if (bannerarraylength > 0) { // CONSTRUCT THE JUMP-ICONS $('.bannerjump-wrapper').prepend( @@ -267,30 +289,87 @@ function banner(activeitem) { function resetcss() { + bannercontrols_left.css({ + left: '', + top: '', + width: '', + height: '', + }); + bannercontrols_right.css({ + left: '', + top: '', + width: '', + height: '', + }); + $('.banneritem a').css({ + width: '', + height: '' + }); + banneritems.css({ + left: '', + width: '', + height: '' + }); + //banneritems.attribute('style',''); + //bannergroup.attr('style',''); +} + +function pause() { + // Pause Button Press + if (typeof bannerautoslide !== 'undefined') { + window.clearInterval(bannerautoslide); + } +} +function play() { + // Play Button Press + scrollL(); + start(); +} +function start() { + //if (typeof bannerautoslide == 'undefined') { + // Scroll on Time + pause(); + bannerautoslide = window.setInterval(function () { + scrollL(); + }, 7500); + //} } // jump to specific Banneritem function jump($activeitem) { (function ($) { + // STOP autoslider - clearInterval(bannerautoslide); + pause(); + // JUMP to chosen Item - banner($activeitem); + activeitem = $activeitem; + order(activeitem); })(jQuery); } +function buttonL() { + pause(); + scrollL(); +} +function buttonR() { + pause(); + scrollR(); +} + // Scroll through the Banneritems // to the left function scrollL() { (function ($) { + // GET Number of Items in the bannergroup activeitem++; - if (activeitem >= banneritem.length) { - activeitem = activeitem - banneritem.length; + if (activeitem >= banneritems.length) { + activeitem = activeitem - banneritems.length; } - banner(activeitem); + order(activeitem); })(jQuery); } @@ -301,16 +380,43 @@ function scrollR() { activeitem--; if (activeitem < 0) { - activeitem = activeitem + banneritem.length; + activeitem = activeitem + banneritems.length; } - banner(activeitem); + order(activeitem); })(jQuery); } -// Scroll on Time -var bannerautoslide = setInterval(function () { - scrollL(); -}, 7500); +// TODO Set images as background-images -// TODO Set images as background-images \ No newline at end of file +function order($item) { + //if ($item != null) { + // activeitem = 0; + //} + + banneritems = $('.banneritem'); + orderarray = new Array(); + + // Calculate the center Position + activepos = Math.round(banneritems.length / 2); + + for (i = 0; i < banneritems.length; i++) { + orderarray[i] = i; + } + for (j = 0; j < activepos + activeitem; j++) { + orderarray.unshift(orderarray.pop()); + } + maintenance(); +} + +function notransitions() { + $('.bannergroup *').css({ + transition: "none" + }) +} + +function yestransitions() { + $('.bannergroup *').css({ + transition: "" + }) +} \ No newline at end of file diff --git a/slider.html b/slider.html index 806700b..707155e 100644 --- a/slider.html +++ b/slider.html @@ -20,14 +20,14 @@ -
Dies ist ein Text.
+
Fotos von unsplash.it.
-
Dies ist ein Text.
+
Dies ist ein längerer Text.
@@ -41,12 +41,24 @@ -
Dies ist ein Text.
+
Wort.
+ +
+
+ + + +
Simon hat das geschrieben.
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et + dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, + consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed + diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea + takimata sanctus est Lorem ipsum dolor sit amet.