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
This commit is contained in:
+193
-87
@@ -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("<div class='bannerjump-wrapper'></div>");
|
||||
|
||||
// ADD the left/right controls
|
||||
// TODO Jumps to <a>-top by clicking left/right arrows
|
||||
// ADD the left/right start/stop controls
|
||||
bannergroup
|
||||
.append(
|
||||
"<div class='bannercontrols'><a class='right' onclick='scrollL()' href='#'><div class='iconwrapper'><span class='circle'><span class='arrow'></span></span></div></a> <a class='left' onclick='scrollR()' href='#'><div class='iconwrapper'><span class='circle'><span class='arrow'></span></span></div></a></div>");
|
||||
"<div class='bannerautoplay'>" +
|
||||
"<a class='pause' onclick='pause()'></a>" +
|
||||
"<a class='play' onclick='play()'></a> " +
|
||||
"</div> " +
|
||||
"" +
|
||||
"<div class='bannercontrols'>" +
|
||||
"" +
|
||||
"<a class='right' onclick='buttonL()' href='#'>" +
|
||||
"<div class='iconwrapper'>" +
|
||||
"<span class='circle'>" +
|
||||
"<span class='arrow'>" +
|
||||
"</span>" +
|
||||
"</span>" +
|
||||
"</div>" +
|
||||
"</a>" +
|
||||
"" +
|
||||
"<a class='left' onclick='buttonR()' href='#'>" +
|
||||
"<div class='iconwrapper'>" +
|
||||
"<span class='circle'>" +
|
||||
"<span class='arrow'>" +
|
||||
"</span>" +
|
||||
"</span>" +
|
||||
"</div>" +
|
||||
"</a>" +
|
||||
"" +
|
||||
"</div>");
|
||||
|
||||
|
||||
// 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
|
||||
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: ""
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user