439 lines
11 KiB
JavaScript
439 lines
11 KiB
JavaScript
/**
|
|
* SIMON GEHRIGs Slider
|
|
*/
|
|
|
|
|
|
/*
|
|
*
|
|
* CONFIGURATION DEFAULTS
|
|
*
|
|
* */
|
|
slider_aspect = 16 / 10;
|
|
/*
|
|
*
|
|
* END CONFIGURATION DEFAULTS
|
|
*
|
|
* */
|
|
|
|
|
|
// Global Variables
|
|
msie = window.navigator.userAgent.indexOf("msie ");
|
|
activeitem = 0;
|
|
|
|
|
|
// WHEN DOCUMENT IS READY
|
|
(function ($) {
|
|
$(document).ready(function () {
|
|
|
|
notransitions();
|
|
|
|
order(activeitem);
|
|
|
|
start();
|
|
|
|
if (msie) {
|
|
order(activeitem);
|
|
}
|
|
|
|
yestransitions();
|
|
})
|
|
})(jQuery);
|
|
|
|
|
|
// IF WINDOW GETS RESIZED
|
|
(function ($) {
|
|
$(window).resize(function () {
|
|
|
|
resetcss();
|
|
|
|
notransitions();
|
|
|
|
order(activeitem);
|
|
|
|
yestransitions();
|
|
|
|
})
|
|
})(jQuery);
|
|
|
|
// -----------------------------------------
|
|
// LIST OF ALL FUNCTIONS TRIGGERED ABOVE
|
|
function maintenance() {
|
|
Dimensions();
|
|
banner(activeitem);
|
|
}
|
|
// -----------------------------------------
|
|
|
|
// GIVES BACK ALL DIMENSIONS
|
|
function Dimensions() {
|
|
(function ($) {
|
|
|
|
bannergroupwidth = null;
|
|
banneritemwidth = null;
|
|
|
|
bannerheight = null;
|
|
banneroffset = null;
|
|
|
|
// Get jQuery Objects
|
|
bannergroup = '';
|
|
bannergroup = $('.bannergroup');
|
|
|
|
banneritems = '';
|
|
banneritems = $('.banneritem');
|
|
|
|
bannergroupwidth = bannergroup[0].clientWidth;
|
|
banneritemwidth = banneritems[0].clientWidth;
|
|
|
|
// CALCULATE BANNER DIMENSIONS
|
|
bannerheight = banneritemwidth / slider_aspect;
|
|
banneroffset = (bannergroupwidth - banneritemwidth) / 2;
|
|
|
|
})(jQuery);
|
|
|
|
}
|
|
|
|
// BANNER RELATED FUNCTIONS
|
|
function banner(activeitem) {
|
|
(function ($) {
|
|
// -----------------------------------------------------------------------
|
|
// THE BANNER SLIDER
|
|
// -----------------------------------------------------------------------
|
|
// SET activeelement to first element if not set
|
|
|
|
if (!activeitem) {
|
|
activeitem = 0;
|
|
}
|
|
|
|
// Get the Control Elements
|
|
bannerjump_wrapper = $('.bannerjump-wrapper');
|
|
bannercontrols = $('.bannercontrols');
|
|
bannerautoplay = $('.bannerautoplay');
|
|
|
|
// Make the banner arraylength more comfortable to calculate in the loop
|
|
bannerarraylength = banneritems.length - 1;
|
|
|
|
// -----------------------------------------------------------------------
|
|
// HTML
|
|
// -----------------------------------------------------------------------
|
|
|
|
// REMOVE JUMPER AND LEFT/RIGHT CONTROLS
|
|
// ------------------------------------------------------------------------
|
|
bannerjump_wrapper.detach();
|
|
bannercontrols.detach();
|
|
bannerautoplay.detach();
|
|
|
|
// ADD THE CONTROLS
|
|
// ------------------------------------------------------------------------
|
|
// 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(
|
|
"<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
|
|
// --------------------------------------------------------------------
|
|
bannergroup.css({
|
|
height: bannerheight
|
|
});
|
|
|
|
$('.banneritem a').css({
|
|
width: banneritemwidth,
|
|
height: bannerheight
|
|
});
|
|
|
|
|
|
// BANNER CONTROLS
|
|
// --------------------------------------------------------------------------
|
|
|
|
// SET LEFT/RIGHT DIMENSIONS
|
|
bannercontrols_left = $('.bannercontrols .left');
|
|
bannercontrols_right = $('.bannercontrols .right');
|
|
|
|
bannercontrols_left.css({
|
|
position: "absolute",
|
|
left: '',
|
|
top: '',
|
|
width: '',
|
|
height: '',
|
|
"z-index": "10000"
|
|
});
|
|
|
|
bannercontrols_left.css({
|
|
position: "absolute",
|
|
top: 0,
|
|
width: banneroffset,
|
|
height: bannerheight,
|
|
"z-index": "10000"
|
|
});
|
|
|
|
bannercontrols_left.css({
|
|
left: bannergroupwidth - bannercontrols_left[0].clientWidth - 5 // TODO Remove these 5px whereever they come from
|
|
})
|
|
|
|
bannercontrols_right.css({
|
|
position: "absolute",
|
|
left: 0,
|
|
top: 0,
|
|
width: banneroffset,
|
|
height: bannerheight,
|
|
"z-index": "10000"
|
|
});
|
|
|
|
// SET THE BANNERITEMS'POSITIONS
|
|
// --------------------------------------------------------------
|
|
|
|
|
|
// LOOP THROUGH ALL ITEMS
|
|
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
|
|
// 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;
|
|
|
|
// Set CLASSES for styling
|
|
if (activeitem == $i) {
|
|
$state = "active";
|
|
$removal = "inactive";
|
|
}
|
|
else if ((activeitem - 1) == $i || activeitem + 1 == $i) {
|
|
$state = "inactive visible";
|
|
$removal = "active";
|
|
}
|
|
else if (activeitem == bannerarraylength && $i == 0) {
|
|
$state = "inactive visible";
|
|
$removal = "active";
|
|
}
|
|
else if (activeitem == 0 && $i == bannerarraylength) {
|
|
$state = "inactive visible";
|
|
$removal = "active";
|
|
}
|
|
else {
|
|
$state = "inactive";
|
|
$removal = "active visible";
|
|
}
|
|
|
|
// SET THE VALUES CALCULATED IN THE LOGIC
|
|
$banneritem.css({
|
|
"left": $left,
|
|
"width": banneritemwidth,
|
|
"height": bannerheight
|
|
});
|
|
|
|
$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>"
|
|
);
|
|
|
|
// Make the active jumper colored different
|
|
if (activeitem == $i) {
|
|
$('.bannerjump-' + ($i)).addClass("active");
|
|
}
|
|
}
|
|
|
|
} // End for()
|
|
|
|
//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');
|
|
iframe.removeAttribute('width');
|
|
}
|
|
|
|
})(jQuery);
|
|
}
|
|
|
|
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: ''
|
|
});
|
|
}
|
|
|
|
function pause() {
|
|
// Pause Button Press
|
|
if (typeof bannerautoslide !== 'undefined') {
|
|
window.clearInterval(bannerautoslide);
|
|
}
|
|
}
|
|
|
|
function play() {
|
|
// Play Button Press
|
|
scrollR();
|
|
start();
|
|
}
|
|
|
|
function start() {
|
|
// Pause to avoid multiple Intervals
|
|
pause();
|
|
|
|
// Scroll on Time
|
|
bannerautoslide = window.setInterval(function () {
|
|
scrollR();
|
|
}, 7500);
|
|
}
|
|
|
|
// jump to specific Banneritem
|
|
function jump($activeitem) {
|
|
(function ($) {
|
|
|
|
// STOP autoslider
|
|
pause();
|
|
|
|
// JUMP to chosen Item
|
|
activeitem = $activeitem;
|
|
|
|
// Reorder
|
|
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 >= banneritems.length) {
|
|
activeitem = activeitem - banneritems.length;
|
|
}
|
|
|
|
order(activeitem);
|
|
})(jQuery);
|
|
}
|
|
|
|
// to the Right
|
|
function scrollR() {
|
|
(function ($) {
|
|
// GET Number of Items in the bannergroup
|
|
activeitem--;
|
|
|
|
if (activeitem < 0) {
|
|
activeitem = activeitem + banneritems.length;
|
|
}
|
|
|
|
order(activeitem);
|
|
})(jQuery);
|
|
}
|
|
|
|
// TODO Set images as background-images
|
|
|
|
function order($item) {
|
|
|
|
// 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
|
|
} |