JS-Slider/bannerslider.js

/**
 *
 */
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