JS-Slider/bannerslider.js

/**
 * 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 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;
        //bannergroupwidth = bannergroup[0].width();
        //banneritemwidth = banneritems[0].width();

        // 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];

            $banneritem = $(".banneritem:eq(" + $banneritemnr + ")");

            $posoffset = activepos - 1 - $posnr;

            $left = ($posoffset * banneritemwidth) + banneroffset;

            // Get optional 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);

            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: ''
    });
    //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
        pause();

        // JUMP to chosen Item
        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 >= 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) {
    //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: ""
    })
}