Added Styles, Arrows, cleaned scss and js, added example implementation
TODO: new positioning of items --> Array rotate fix z-indexing
This commit is contained in:
+316
@@ -0,0 +1,316 @@
|
||||
/**
|
||||
*
|
||||
*/
|
||||
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();
|
||||
})
|
||||
})(jQuery);
|
||||
|
||||
|
||||
// IF WINDOW GETS RESIZED
|
||||
(function ($) {
|
||||
$(window).resize(function () {
|
||||
resetcss();
|
||||
maintenance();
|
||||
})
|
||||
})(jQuery);
|
||||
|
||||
// -----------------------------------------
|
||||
// LIST OF ALL FUNCTIONS TRIGGERED ABOVE
|
||||
function maintenance() {
|
||||
Dimensions();
|
||||
banner();
|
||||
}
|
||||
// -----------------------------------------
|
||||
|
||||
// GIVES BACK ALL DIMENSIONS
|
||||
function Dimensions() {
|
||||
(function ($) {
|
||||
|
||||
bannergroupwidth = null;
|
||||
banneritemwidth = null;
|
||||
|
||||
bannerheight = null;
|
||||
banneroffset = null;
|
||||
|
||||
// Get jQuery Objects
|
||||
bannergroup = $('.bannergroup');
|
||||
banneritem = $('.banneritem');
|
||||
|
||||
// TODO Reset the CSS Properties
|
||||
banneritem.css({
|
||||
width: '',
|
||||
height: '',
|
||||
left: ''
|
||||
});
|
||||
|
||||
bannergroupwidth = bannergroup[0].clientWidth;
|
||||
banneritemwidth = banneritem[0].clientWidth;
|
||||
|
||||
// CALCULATE BANNER DIMENSIONS
|
||||
bannerheight = banneritemwidth / 1.5;
|
||||
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');
|
||||
|
||||
// Make the banner arraylength more comfortable to calculate in the loop
|
||||
bannerarraylength = banneritem.length - 1;
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// HTML
|
||||
// -----------------------------------------------------------------------
|
||||
|
||||
// REMOVE JUMPER AND LEFT/RIGHT CONTROLS
|
||||
// ------------------------------------------------------------------------
|
||||
bannerjump_wrapper.detach();
|
||||
bannercontrols.detach();
|
||||
|
||||
// ADD THE CONTROLS
|
||||
// ------------------------------------------------------------------------
|
||||
// ADD the Jumper-wrapper
|
||||
bannergroup.append("<div class='bannerjump-wrapper'></div>");
|
||||
|
||||
// ADD the left/right 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>");
|
||||
|
||||
|
||||
// SET BANNER DIMENSIONS
|
||||
// --------------------------------------------------------------------
|
||||
bannergroup.css({
|
||||
height: bannerheight
|
||||
});
|
||||
$('.banneritem, .banneritem iframe').css({
|
||||
width: banneritemwidth,
|
||||
height: bannerheight,
|
||||
left: banneroffset
|
||||
});
|
||||
$('.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++) {
|
||||
|
||||
$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;
|
||||
}
|
||||
|
||||
|
||||
// SET THE VALUES CALCULATED IN THE LOGIC
|
||||
$banneritem_nth.css({
|
||||
"left": $left,
|
||||
"width": banneritemwidth,
|
||||
"height": bannerheight
|
||||
//"opacity": 1
|
||||
});
|
||||
|
||||
|
||||
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";
|
||||
}
|
||||
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";
|
||||
}
|
||||
|
||||
$banneritem_nth.addClass($state);
|
||||
$banneritem_nth.removeClass($removal);
|
||||
|
||||
//$('.banneritem:nth-of-type(' + ($i + 1) + ') img').css({
|
||||
// "top": (bannerheight - $imageheight) / 2
|
||||
//})
|
||||
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() {
|
||||
|
||||
}
|
||||
|
||||
// jump to specific Banneritem
|
||||
function jump($activeitem) {
|
||||
(function ($) {
|
||||
// STOP autoslider
|
||||
clearInterval(bannerautoslide);
|
||||
// JUMP to chosen Item
|
||||
banner($activeitem);
|
||||
})(jQuery);
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
banner(activeitem);
|
||||
})(jQuery);
|
||||
}
|
||||
|
||||
// to the Right
|
||||
function scrollR() {
|
||||
(function ($) {
|
||||
// GET Number of Items in the bannergroup
|
||||
activeitem--;
|
||||
|
||||
if (activeitem < 0) {
|
||||
activeitem = activeitem + banneritem.length;
|
||||
}
|
||||
|
||||
banner(activeitem);
|
||||
})(jQuery);
|
||||
}
|
||||
|
||||
// Scroll on Time
|
||||
var bannerautoslide = setInterval(function () {
|
||||
scrollL();
|
||||
}, 7500);
|
||||
|
||||
// TODO Set images as background-images
|
||||
Reference in New Issue
Block a user