elslider

Benchmark created on


Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
  
  /*
   * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
   *
   * Uses the built in easing capabilities added In jQuery 1.1
   * to offer multiple easing options
   *
   * TERMS OF USE - jQuery Easing
   * 
   * Open source under the BSD License. 
   * 
   * Copyright © 2008 George McGinley Smith
   * All rights reserved.
   * 
   * Redistribution and use in source and binary forms, with or without modification, 
   * are permitted provided that the following conditions are met:
   * 
   * Redistributions of source code must retain the above copyright notice, this list of 
   * conditions and the following disclaimer.
   * Redistributions in binary form must reproduce the above copyright notice, this list 
   * of conditions and the following disclaimer in the documentation and/or other materials 
   * provided with the distribution.
   * 
   * Neither the name of the author nor the names of contributors may be used to endorse 
   * or promote products derived from this software without specific prior written permission.
   * 
   * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
   * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
   * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
   *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
   *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
   *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 
   * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
   *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
   * OF THE POSSIBILITY OF SUCH DAMAGE. 
   *
  */
  
  // t: current time, b: begInnIng value, c: change In value, d: duration
  jQuery.easing['jswing'] = jQuery.easing['swing'];
  
  jQuery.extend( jQuery.easing,
  {
        def: 'easeOutQuad',
        swing: function (x, t, b, c, d) {
                //alert(jQuery.easing.default);
                return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
        },
        easeInQuad: function (x, t, b, c, d) {
                return c*(t/=d)*t + b;
        },
        easeOutQuad: function (x, t, b, c, d) {
                return -c *(t/=d)*(t-2) + b;
        },
        easeInOutQuad: function (x, t, b, c, d) {
                if ((t/=d/2) < 1) return c/2*t*t + b;
                return -c/2 * ((--t)*(t-2) - 1) + b;
        },
        easeInCubic: function (x, t, b, c, d) {
                return c*(t/=d)*t*t + b;
        },
        easeOutCubic: function (x, t, b, c, d) {
                return c*((t=t/d-1)*t*t + 1) + b;
        },
        easeInOutCubic: function (x, t, b, c, d) {
                if ((t/=d/2) < 1) return c/2*t*t*t + b;
                return c/2*((t-=2)*t*t + 2) + b;
        },
        easeInQuart: function (x, t, b, c, d) {
                return c*(t/=d)*t*t*t + b;
        },
        easeOutQuart: function (x, t, b, c, d) {
                return -c * ((t=t/d-1)*t*t*t - 1) + b;
        },
        easeInOutQuart: function (x, t, b, c, d) {
                if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
                return -c/2 * ((t-=2)*t*t*t - 2) + b;
        },
        easeInQuint: function (x, t, b, c, d) {
                return c*(t/=d)*t*t*t*t + b;
        },
        easeOutQuint: function (x, t, b, c, d) {
                return c*((t=t/d-1)*t*t*t*t + 1) + b;
        },
        easeInOutQuint: function (x, t, b, c, d) {
                if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
                return c/2*((t-=2)*t*t*t*t + 2) + b;
        },
        easeInSine: function (x, t, b, c, d) {
                return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
        },
        easeOutSine: function (x, t, b, c, d) {
                return c * Math.sin(t/d * (Math.PI/2)) + b;
        },
        easeInOutSine: function (x, t, b, c, d) {
                return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
        },
        easeInExpo: function (x, t, b, c, d) {
                return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
        },
        easeOutExpo: function (x, t, b, c, d) {
                return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
        },
        easeInOutExpo: function (x, t, b, c, d) {
                if (t==0) return b;
                if (t==d) return b+c;
                if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
                return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
        },
        easeInCirc: function (x, t, b, c, d) {
                return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
        },
        easeOutCirc: function (x, t, b, c, d) {
                return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
        },
        easeInOutCirc: function (x, t, b, c, d) {
                if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
                return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
        },
        easeInElastic: function (x, t, b, c, d) {
                var s=1.70158;var p=0;var a=c;
                if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
                if (a < Math.abs(c)) { a=c; var s=p/4; }
                else var s = p/(2*Math.PI) * Math.asin (c/a);
                return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
        },
        easeOutElastic: function (x, t, b, c, d) {
                var s=1.70158;var p=0;var a=c;
                if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
                if (a < Math.abs(c)) { a=c; var s=p/4; }
                else var s = p/(2*Math.PI) * Math.asin (c/a);
                return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
        },
        easeInOutElastic: function (x, t, b, c, d) {
                var s=1.70158;var p=0;var a=c;
                if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
                if (a < Math.abs(c)) { a=c; var s=p/4; }
                else var s = p/(2*Math.PI) * Math.asin (c/a);
                if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
                return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
        },
        easeInBack: function (x, t, b, c, d, s) {
                if (s == undefined) s = 1.70158;
                return c*(t/=d)*t*((s+1)*t - s) + b;
        },
        easeOutBack: function (x, t, b, c, d, s) {
                if (s == undefined) s = 1.70158;
                return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
        },
        easeInOutBack: function (x, t, b, c, d, s) {
                if (s == undefined) s = 1.70158; 
                if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
                return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
        },
        easeInBounce: function (x, t, b, c, d) {
                return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
        },
        easeOutBounce: function (x, t, b, c, d) {
                if ((t/=d) < (1/2.75)) {
                        return c*(7.5625*t*t) + b;
                } else if (t < (2/2.75)) {
                        return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
                } else if (t < (2.5/2.75)) {
                        return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
                } else {
                        return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
                }
        },
        easeInOutBounce: function (x, t, b, c, d) {
                if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
                return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
        }
  });
  
  /*
   *
   * TERMS OF USE - EASING EQUATIONS
   * 
   * Open source under the BSD License. 
   * 
   * Copyright © 2001 Robert Penner
   * All rights reserved.
   * 
   * Redistribution and use in source and binary forms, with or without modification, 
   * are permitted provided that the following conditions are met:
   * 
   * Redistributions of source code must retain the above copyright notice, this list of 
   * conditions and the following disclaimer.
   * Redistributions in binary form must reproduce the above copyright notice, this list 
   * of conditions and the following disclaimer in the documentation and/or other materials 
   * provided with the distribution.
   * 
   * Neither the name of the author nor the names of contributors may be used to endorse 
   * or promote products derived from this software without specific prior written permission.
   * 
   * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
   * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
   * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
   *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
   *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
   *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 
   * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
   *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
   * OF THE POSSIBILITY OF SUCH DAMAGE. 
   *
   */
  
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
2
/*
 * jQuery 'onImagesLoaded' plugin v1.1.1 (Updated January 27, 2010)
 * Fires callback functions when images have loaded within a particular selector.
 *
 * Copyright (c) Cirkuit Networks, Inc. (http://www.cirkuit.net), 2008-2010.
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * For documentation and usage, visit "http://includes.cirkuit.net/includes/js/jquery/plugins/onImagesLoad/1.1.1/documentation/"
 */
(function($){
    $.fn.onImagesLoad = function(options){
        var self = this;
        self.opts = $.extend({}, $.fn.onImagesLoad.defaults, options);

        self.bindEvents = function($imgs, container, callback){
            if ($imgs.length === 0){ //no images were in selection. callback based on options
                if (self.opts.callbackIfNoImagesExist && callback){ callback(container); }
            }
            else {
                var loadedImages = [];
                if (!$imgs.jquery){ $imgs = $($imgs); }
                $imgs.each(function(i){
                    //webkit fix inspiration thanks to bmsterling: http://plugins.jquery.com/node/10312
                    var orgSrc = this.src;
                    if (!$.browser.msie) {
                        this.src = ""; //ie will do funky things if this is here (show the image as an X, only show half of the image, etc)
                    }
                    $(this).bind('load', function(){
                        if (jQuery.inArray(i, loadedImages) < 0){ //don't double count images
                            loadedImages.push(i); //keep a record of images we've seen
                            if (loadedImages.length == $imgs.length){
                                if (callback){ callback.call(container, container); }
                            }
                        }
                    });
                    if (!$.browser.msie) {
                        this.src = orgSrc; //needed for potential cached images
                    }
                    else if (this.complete || this.complete === undefined){ this.src = orgSrc; }
                });
            }
        };

        var imgAry = []; //only used if self.opts.selectorCallback exists
        self.each(function(){
            if (self.opts.itemCallback){
                var $imgs;
                if (this.tagName == "IMG"){ $imgs = this; } //is an image
                else { $imgs = $('img', this); } //contains image(s)
                self.bindEvents($imgs, this, self.opts.itemCallback);
            }
            if (self.opts.selectorCallback){
                if (this.tagName == "IMG"){ imgAry.push(this); } //is an image
                else { //contains image(s)
                    $('img', this).each(function(){ imgAry.push(this); });
                }
            }
        });
        if (self.opts.selectorCallback){ self.bindEvents(imgAry, this, self.opts.selectorCallback); }

        return self.each(function(){}); //dont break the chain
    };

    //DEFAULT OPTIONS
    $.fn.onImagesLoad.defaults = {
        selectorCallback: null,        //the function to invoke when all images that $(yourSelector) encapsultaes have loaded (invoked only once per selector. see documentation)
        itemCallback: null,            //the function to invoke when each item that $(yourSelector) encapsultaes has loaded (invoked one or more times depending on selector. see documentation)
        callbackIfNoImagesExist: false //if true, the callbacks will be invoked even if no images exist within $(yourSelector).
                                       //if false, the callbacks will not be invoked if no images exist within $(yourSelector).
    };
})(jQuery);

// v0.6a

(function ($) {
        $.fn.elSlider = function (options) {
                options = $.extend({
                        visibleitems: 3,
                        vertical: false,
                        continuous: false,
                        numbers: true,
                        thumbs: true,
                        fade: true,
                        autoplay: false,
                        autoplayspeed: 4000,
                        animationspeed: 300,
                        fadingspeed: 200,
                        customeasing: "easeInOutExpo", // Choose Easing Method from JQuery Easing Plugin, "swing" and "linear" if no Easing Plugin available
                        itemclass: ".sl_item",
                        visiblecontainer: ".sl_visible",
                        movingcontainer: ".sl_movingcontainer",
                        leftarrow: ".sl_leftarrow a",
                        rightarrow: ".sl_rightarrow a",
                        numberscontainer: ".numbers ul",
                        thumbscontainer: ".hiddenthumbs",
                        bar: ".nav"
                }, options);
                return this.each(function () {

                        // MAIN CONTAINERS

                        var sl_item = $(options.itemclass, this);
                        var sl_movingcontainer = $(options.movingcontainer, this);
                        var sl_visiblecontainer = $(options.visiblecontainer, this);
                        var sl_leftarrow = $(options.leftarrow, this);
                        var sl_rightarrow = $(options.rightarrow, this);
                        var sl_numberscontainer = $(options.numberscontainer, this);
                        var sl_thumbscontainer = $(options.thumbscontainer, this);
                        var sl_bar = $(options.bar, this);

                        // FURTHER VARIABLES

                        var sl_itemcount = $(sl_movingcontainer).children().length;
                        var sl_itemwidth = $(sl_item).outerWidth();
                        var sl_itemwidthpxpos = sl_itemwidth + "px";
                        var sl_itemwidthpxneg = "-" + sl_itemwidth + "px";
                        var sl_itemheight = $(sl_item).outerHeight();
                        var sl_itemheightpxpos = sl_itemheight + "px";
                        var sl_itemheightpxneg = "-" + sl_itemheight + "px";
                        var sl_visibleitems = options.visibleitems;
                        var sl_visiblewidth = sl_visibleitems * sl_itemwidth;

                        var sl_currentpos = 0;
                        var sl_arrowwidth = $(options.leftarrow, this).width();
                        var sl_totalwidth = sl_visiblewidth;
                        var sl_vertical = options.vertical;
                        var sl_continuous = options.continuous;
                        var sl_numbers = options.numbers;
                        var sl_thumbs = options.thumbs;
                        var sl_animationspeed = options.animationspeed;
                        var sl_fadingspeed = options.fadingspeed;

                        var arguments = new Object;
                        var sl_cont_dir = "";
                        var sl_aniarg_right = {};
                        var sl_aniarg_left = {};

                        var lastitem = false;
                        var firstitem = false;

                        // ************* DEFINE ARGUMENTS FOR ANIMATION *************** //

                        function defineArgs(times) {
                                if (sl_vertical == true) {
                                        $(sl_item).css({"float":"none"});
                                        $(sl_visiblecontainer).css({"height":sl_itemheight * sl_visibleitems});
                                        sl_aniarg_right["top"] = "-=" + sl_itemheight * times;
                                        sl_aniarg_right["queue"] = false;
                                        sl_aniarg_left["top"] = "+=" + sl_itemheight * times;
                                        sl_aniarg_left["queue"] = false;
                                        sl_cont_dir = "top";
                                }
                                else {
                                        sl_aniarg_right["left"] = "-=" + sl_itemwidth * times;
                                        sl_aniarg_right["queue"] = false;
                                        sl_aniarg_left["left"] = "+=" + sl_itemwidth * times;
                                        sl_aniarg_left["queue"] = false;
                                        sl_cont_dir = "left";
                                }
                        }

                        defineArgs(1);

                        // APPLY TOTAL WIDTH ON SLIDER AND VISIBLE WIDTH ON VISIBLECONTAINER,
                        // HIDE ARROW IF CONTINUOUS IS FALSE

                        $(sl_visiblecontainer).width(sl_visiblewidth);
                        if (sl_continuous == false) {
                                $(sl_leftarrow).addClass("ishidden");
                        }

                        // ***************** FADE FUNCTION ****************** //

                        function Fade(direction, speed, times) {
                                $(sl_movingcontainer).fadeOut(speed, function() {
                                        if (direction == "right") {
                                                FadeToRight(times);
                                        }
                                        else {
                                                FadeToLeft(times);
                                        }
                                });
                                $(sl_movingcontainer).fadeIn(speed);
                        }

                        /* BRUENDL */

                        var heading = $(".btn-info-block",sl_item);

                        /* BRUENDL END */


                        // *************** SLIDE FUNCTION ****************** //

                        function Slide(direction, speed, times) {

                                defineArgs(times);
                                if (direction == "right") {
                                        arguments = sl_aniarg_right;
                                }
                                else {
                                        arguments = sl_aniarg_left;
                                }
                                if (firstitem == true) {
                                        if (sl_vertical == false) {
                                                $(sl_movingcontainer).css("left", sl_itemwidthpxneg);
                                        }
                                        else {
                                                $(sl_movingcontainer).css("top", sl_itemheightpxneg);
                                        }
                                }

                                var customeasing = options.customeasing;

                                $(".stresslayer").show();

                                /* BRUENDL */

                                heading.fadeOut(0);

                                /* BRUENDL END */

                                $(sl_movingcontainer).stop(false, false).animate(
                                                arguments, speed, customeasing, function() {

                                                        //$(".stresslayer").hide();
                                                        if (lastitem == true || firstitem == true) {
                                                                if (direction == "right") {
                                                                        if (sl_vertical == false) {
                                                                                $(sl_movingcontainer).css("left", "0px");
                                                                        }
                                                                        else {
                                                                                $(sl_movingcontainer).css("top", 0);
                                                                        }
                                                                        lastitem = false;

                                                                        $(sl_item.eq(sl_itemcount)).remove();
                                                                }
                                                                if (direction == "left") {
                                                                        $(".sl_item:eq(0)", this).remove();
                                                                        if (sl_vertical == false) {
                                                                                var fromleft = (sl_itemwidth * (sl_itemcount - 1)) * -1;
                                                                                $(sl_movingcontainer).css("left", fromleft + "px");
                                                                        }
                                                                        else {
                                                                                var fromtop = (sl_itemheight * (sl_itemcount - 1)) * -1;
                                                                                $(sl_movingcontainer).css("top", fromtop + "px");
                                                                        }
                                                                        firstitem = false;
                                                                }
                                                        }

                                                        /* BRUENDL */

                                                        heading.fadeIn(500);

                                                        /* BRUENDL END */

                                                }
                                                );
                        }

                        // ************** ANIMATE FUNCTION ************** // differs between slide and fade

                        function Animation(direction, fade, times) {

                                if (sl_continuous == false) {
                                        if (direction == "right") {
                                                if ($(sl_leftarrow).hasClass("ishidden")) {
                                                        $(sl_leftarrow).removeClass("ishidden");
                                                }
                                        }
                                        else {
                                                if ($(sl_rightarrow).hasClass("ishidden")) {
                                                        $(sl_rightarrow).removeClass("ishidden");
                                                }
                                        }
                                }

                                // Position Adjustments

                                function AppendFirstItem() {
                                        lastitem = true;
                                        var firstitemtomove = $(sl_item.eq(0));
                                        $(firstitemtomove).clone().appendTo(sl_movingcontainer);
                                }

                                function PrependLastItem() {
                                        firstitem = true;
                                        var lastitemtomove = $(sl_item.eq(sl_itemcount - 1));
                                        $(lastitemtomove).clone().prependTo(sl_movingcontainer);

                                }

                                if (direction == "right") {
                                        if (sl_continuous == false) {
                                                sl_currentpos = sl_currentpos + (1 * times);
                                                if (sl_currentpos > 0) {
                                                        $(sl_leftarrow).removeClass("ishidden");
                                                }
                                                if (sl_currentpos == (sl_itemcount - sl_visibleitems)) {
                                                        $(sl_rightarrow).addClass("ishidden");
                                                }
                                        }
                                        else {
                                                if ((sl_currentpos + 1) == sl_itemcount) {
                                                        AppendFirstItem();
                                                }
                                                sl_currentpos++;
                                                if (sl_currentpos == sl_itemcount) {
                                                        sl_currentpos = 0;
                                                }

                                        }
                                }
                                else {
                                        if (sl_continuous == false) {
                                                sl_currentpos = sl_currentpos - (1 * times);
                                                if (sl_currentpos == 0) {
                                                        $(sl_leftarrow).addClass("ishidden");
                                                }
                                        }
                                        else {

                                                if ((sl_currentpos) == 0) {
                                                        PrependLastItem();
                                                }
                                                sl_currentpos--;
                                                if (sl_currentpos == -1) {
                                                        sl_currentpos = (sl_itemcount - 1);
                                                }


                                        }
                                }

                                if (fade == true) {
                                        Fade(direction, sl_fadingspeed, times);
                                }
                                else {
                                        Slide(direction, sl_animationspeed, times);
                                }

                                // Thumb Adjustments

                                if (sl_thumbs == true) {
                                        $(".thumb", sl_thumbscontainer).removeClass("current");
                                        $(".thumb:eq(" + (sl_currentpos) + ")").addClass("current");
                                }

                                // Nr Adjustments

                                if (sl_numbers == true) {
                                        $("li.current", sl_numberscontainer).removeClass("current");
                                        $("li:eq(" + (sl_currentpos) + ")", sl_numberscontainer).addClass("current");
                                }

                                return false;

                        }

                        ;

                        // CLICK RIGHT ARROW

                        $(sl_rightarrow).click(
                                        function() {
                                                StopInterval();
                                                Animation("right", false, 1);
                                                return false;
                                        }
                                        )

                        // CLICK LEFT ARROW

                        $(sl_leftarrow).click(
                                        function() {
                                                StopInterval();
                                                Animation("left", false, 1);
                                                return false;
                                        }
                                        )

                        // APPEND NUMBERS

                        if (sl_numbers == true) {
                                for (i = 1; i <= sl_itemcount; i++) {
                                        $(sl_numberscontainer).append("<li><div class='stresslayer'></div><a href='#' >" + i + "</a></li>");
                                }
                                $("li:eq(0)", sl_numberscontainer).addClass("current");
                        }

                        // NUMBERS CLICK FUNCTIONS

                        $("li a", sl_numberscontainer).bind( {

                                click: function() {

                                        StopInterval();
                                        var currentnr = 0;
                                        for (i = 0; i < sl_itemcount; i++) {
                                                var thisclass = $("li:eq(" + i + ")", sl_numberscontainer).attr("class");
                                                if (thisclass == "current") {
                                                        var currentnr = i;
                                                        break;
                                                }
                                        }

                                        $("li", sl_numberscontainer).removeClass("current");
                                        $(this).parent().addClass("current");

                                        var clickpos = 0;

                                        for (i = 0; i < sl_itemcount; i++) {
                                                var thisclass = $("li:eq(" + i + ")", sl_numberscontainer).attr("class");
                                                if (thisclass == "current") {
                                                        var clickpos = i;
                                                        break;
                                                }
                                        }

                                        /* TECHNODAT BEGIN */

                                        var currentimg = images[i];


                                        $("<img />").prependTo("#background_container").attr("src",currentimg);
                                        $('#background_container').onImagesLoad({
                                                selectorCallback: function() {
                                                        $("<div class='bgimage'>").prependTo("#background_container").attr("style", "background-image: url(" + currentimg + ");");
                                                        $("img","#background_container").remove();
                                                        $(".stresslayer").show();
                                                        $("#background_container .bgimage:last").fadeOut(600, function() {
                                                        $("#background_container .bgimage:last").remove();
                                                                $(".stresslayer").hide();
                                                        });
                                                }
                                        });

                                        /* TECHNODAT END */

                                        var difference = currentnr - clickpos;
                                        difference = Math.abs(difference);

                                        if (currentnr > clickpos) {
                                                for (i = 1; i <= difference; i++) {
                                                        Animation("left", false, difference);
                                                }
                                        }
                                        else {
                                                for (i = 1; i <= difference; i++) {
                                                        Animation("right", false, difference);
                                                }
                                        }

                                        if (sl_numbers == true) {
                                                $("li.current", sl_numberscontainer).removeClass("current");
                                                $("li:eq(" + clickpos + ")", sl_numberscontainer).addClass("current");
                                        }

                                        sl_currentpos = clickpos;

                                        if (sl_thumbs == true) {
                                                $(".thumb", sl_thumbscontainer).removeClass("current");
                                                $(".thumb:eq(" + (sl_currentpos) + ")").addClass("current");
                                        }

                                        return false;

                                }
                        });

                        // SHOW THUMBNAILS

                        if (sl_thumbs == true) {
                                $(sl_bar).hover(function() {
                                        $(sl_thumbscontainer).fadeIn("fast");
                                }, function() {
                                        $(sl_thumbscontainer).fadeOut("fast");
                                });
                        }

                        // THUMBNAIL CLICK FUNCTIONS

                        $(".thumb a", sl_thumbscontainer).bind( {

                                click: function() {
                                        
                                        StopInterval();
                                        var currentthumb = 0;
                                        for (i = 0; i < sl_itemcount; i++) {
                                                var thisclass = $(".thumb:eq(" + i + ")", sl_thumbscontainer).attr("class");
                                                if (thisclass == "thumb current") {
                                                        var currentthumb = i;
                                                        break;
                                                }
                                        }

                                        $(".thumb", sl_thumbscontainer).removeClass("current");
                                        $(this).parent().addClass("current");

                                        var clickpos = 0;

                                        for (i = 0; i < sl_itemcount; i++) {
                                                var thisclass = $(".thumb:eq(" + i + ")", sl_thumbscontainer).attr("class");
                                                if (thisclass == "thumb current") {
                                                        var clickpos = i;
                                                        break;
                                                }
                                        }

                                        var difference = currentthumb - clickpos;
                                        difference = Math.abs(difference);

                                        if (currentthumb > clickpos) {
                                                for (i = 1; i <= difference; i++) {
                                                        Animation("left", false, difference);
                                                }
                                        }
                                        else {
                                                for (i = 1; i <= difference; i++) {
                                                        Animation("right", false, difference);
                                                }
                                        }

                                        if (sl_numbers == true) {
                                                $("li.current", sl_numberscontainer).removeClass("current");
                                                $("li:eq(" + clickpos + ")", sl_numberscontainer).addClass("current");
                                        }

                                        sl_currentpos = clickpos;

                                        if (sl_thumbs == true) {
                                                $(".thumb", sl_thumbscontainer).removeClass("current");
                                                $(".thumb:eq(" + (sl_currentpos) + ")").addClass("current");
                                        }

                                        return false;
                                }
                        });

                        // AUTOPLAY FUNCTION

                        if (options.autoplay == true) {
                                function AnimateThis() {
                                        Animation("right", false, 1);
                                }

                                var interval = setInterval(AnimateThis, options.autoplayspeed);
                        }

                        function StopInterval() {
                                interval = clearInterval(interval);
                        }


                });
        };
})(jQuery);

 
ready
1

/*
 * jQuery 'onImagesLoaded' plugin v1.1.1 (Updated January 27, 2010)
 * Fires callback functions when images have loaded within a particular selector.
 *
 * Copyright (c) Cirkuit Networks, Inc. (http://www.cirkuit.net), 2008-2010.
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * For documentation and usage, visit "http://includes.cirkuit.net/includes/js/jquery/plugins/onImagesLoad/1.1.1/documentation/"
 */
(function($){
    $.fn.onImagesLoad = function(options){
        var self = this;
        self.opts = $.extend({}, $.fn.onImagesLoad.defaults, options);

        self.bindEvents = function($imgs, container, callback){
            if ($imgs.length === 0){ //no images were in selection. callback based on options
                if (self.opts.callbackIfNoImagesExist && callback){ callback(container); }
            }
            else {
                var loadedImages = [];
                if (!$imgs.jquery){ $imgs = $($imgs); }
                $imgs.each(function(i){
                    //webkit fix inspiration thanks to bmsterling: http://plugins.jquery.com/node/10312
                    var orgSrc = this.src;
                    if (!$.browser.msie) {
                        this.src = ""; //ie will do funky things if this is here (show the image as an X, only show half of the image, etc)
                    }
                    $(this).bind('load', function(){
                        if (jQuery.inArray(i, loadedImages) < 0){ //don't double count images
                            loadedImages.push(i); //keep a record of images we've seen
                            if (loadedImages.length == $imgs.length){
                                if (callback){ callback.call(container, container); }
                            }
                        }
                    });
                    if (!$.browser.msie) {
                        this.src = orgSrc; //needed for potential cached images
                    }
                    else if (this.complete || this.complete === undefined){ this.src = orgSrc; }
                });
            }
        };

        var imgAry = []; //only used if self.opts.selectorCallback exists
        self.each(function(){
            if (self.opts.itemCallback){
                var $imgs;
                if (this.tagName == "IMG"){ $imgs = this; } //is an image
                else { $imgs = $('img', this); } //contains image(s)
                self.bindEvents($imgs, this, self.opts.itemCallback);
            }
            if (self.opts.selectorCallback){
                if (this.tagName == "IMG"){ imgAry.push(this); } //is an image
                else { //contains image(s)
                    $('img', this).each(function(){ imgAry.push(this); });
                }
            }
        });
        if (self.opts.selectorCallback){ self.bindEvents(imgAry, this, self.opts.selectorCallback); }

        return self.each(function(){}); //dont break the chain
    };

    //DEFAULT OPTIONS
    $.fn.onImagesLoad.defaults = {
        selectorCallback: null,        //the function to invoke when all images that $(yourSelector) encapsultaes have loaded (invoked only once per selector. see documentation)
        itemCallback: null,            //the function to invoke when each item that $(yourSelector) encapsultaes has loaded (invoked one or more times depending on selector. see documentation)
        callbackIfNoImagesExist: false //if true, the callbacks will be invoked even if no images exist within $(yourSelector).
                                       //if false, the callbacks will not be invoked if no images exist within $(yourSelector).
    };
})(jQuery);

// v0.6a

(function ($) {
        $.fn.elSlider = function (options) {
                options = $.extend({
                        visibleitems: 3,
                        vertical: false,
                        continuous: false,
                        numbers: true,
                        thumbs: true,
                        fade: true,
                        autoplay: false,
                        autoplayspeed: 4000,
                        animationspeed: 300,
                        fadingspeed: 200,
                        customeasing: "easeInOutExpo", // Choose Easing Method from JQuery Easing Plugin, "swing" and "linear" if no Easing Plugin available
                        itemclass: ".sl_item",
                        visiblecontainer: ".sl_visible",
                        movingcontainer: ".sl_movingcontainer",
                        leftarrow: ".sl_leftarrow a",
                        rightarrow: ".sl_rightarrow a",
                        numberscontainer: ".numbers ul",
                        thumbscontainer: ".hiddenthumbs",
                        bar: ".nav"
                }, options);
                return this.each(function () {

                        // MAIN CONTAINERS

                        var sl_item = $(options.itemclass, this);
                        var sl_movingcontainer = $(options.movingcontainer, this);
                        var sl_visiblecontainer = $(options.visiblecontainer, this);
                        var sl_leftarrow = $(options.leftarrow, this);
                        var sl_rightarrow = $(options.rightarrow, this);
                        var sl_numberscontainer = $(options.numberscontainer, this);
                        var sl_thumbscontainer = $(options.thumbscontainer, this);
                        var sl_bar = $(options.bar, this);

                        // FURTHER VARIABLES

                        var sl_itemcount = $(sl_movingcontainer).children().length;
                        var sl_itemwidth = $(sl_item).outerWidth();
                        var sl_itemwidthpxpos = sl_itemwidth + "px";
                        var sl_itemwidthpxneg = "-" + sl_itemwidth + "px";
                        var sl_itemheight = $(sl_item).outerHeight();
                        var sl_itemheightpxpos = sl_itemheight + "px";
                        var sl_itemheightpxneg = "-" + sl_itemheight + "px";
                        var sl_visibleitems = options.visibleitems;
                        var sl_visiblewidth = sl_visibleitems * sl_itemwidth;

                        var sl_currentpos = 0;
                        var sl_arrowwidth = $(options.leftarrow, this).width();
                        var sl_totalwidth = sl_visiblewidth;
                        var sl_vertical = options.vertical;
                        var sl_continuous = options.continuous;
                        var sl_numbers = options.numbers;
                        var sl_thumbs = options.thumbs;
                        var sl_animationspeed = options.animationspeed;
                        var sl_fadingspeed = options.fadingspeed;

                        var arguments = new Object;
                        var sl_cont_dir = "";
                        var sl_aniarg_right = {};
                        var sl_aniarg_left = {};

                        var lastitem = false;
                        var firstitem = false;

                        // ************* DEFINE ARGUMENTS FOR ANIMATION *************** //

                        function defineArgs(times) {
                                if (sl_vertical == true) {
                                        $(sl_item).css({"float":"none"});
                                        $(sl_visiblecontainer).css({"height":sl_itemheight * sl_visibleitems});
                                        sl_aniarg_right["top"] = "-=" + sl_itemheight * times;
                                        sl_aniarg_right["queue"] = false;
                                        sl_aniarg_left["top"] = "+=" + sl_itemheight * times;
                                        sl_aniarg_left["queue"] = false;
                                        sl_cont_dir = "top";
                                }
                                else {
                                        sl_aniarg_right["left"] = "-=" + sl_itemwidth * times;
                                        sl_aniarg_right["queue"] = false;
                                        sl_aniarg_left["left"] = "+=" + sl_itemwidth * times;
                                        sl_aniarg_left["queue"] = false;
                                        sl_cont_dir = "left";
                                }
                        }

                        defineArgs(1);

                        // APPLY TOTAL WIDTH ON SLIDER AND VISIBLE WIDTH ON VISIBLECONTAINER,
                        // HIDE ARROW IF CONTINUOUS IS FALSE

                        $(sl_visiblecontainer).width(sl_visiblewidth);
                        if (sl_continuous == false) {
                                $(sl_leftarrow).addClass("ishidden");
                        }

                        // ***************** FADE FUNCTION ****************** //

                        function Fade(direction, speed, times) {
                                $(sl_movingcontainer).fadeOut(speed, function() {
                                        if (direction == "right") {
                                                FadeToRight(times);
                                        }
                                        else {
                                                FadeToLeft(times);
                                        }
                                });
                                $(sl_movingcontainer).fadeIn(speed);
                        }

                        /* BRUENDL */

                        var heading = $(".btn-info-block",sl_item);

                        /* BRUENDL END */


                        // *************** SLIDE FUNCTION ****************** //

                        function Slide(direction, speed, times) {

                                defineArgs(times);
                                if (direction == "right") {
                                        arguments = sl_aniarg_right;
                                }
                                else {
                                        arguments = sl_aniarg_left;
                                }
                                if (firstitem == true) {
                                        if (sl_vertical == false) {
                                                $(sl_movingcontainer).css("left", sl_itemwidthpxneg);
                                        }
                                        else {
                                                $(sl_movingcontainer).css("top", sl_itemheightpxneg);
                                        }
                                }

                                var customeasing = options.customeasing;

                                $(".stresslayer").show();

                                /* BRUENDL */

                                heading.fadeOut(0);

                                /* BRUENDL END */

                                $(sl_movingcontainer).stop(false, false).animate(
                                                arguments, speed, customeasing, function() {

                                                        //$(".stresslayer").hide();
                                                        if (lastitem == true || firstitem == true) {
                                                                if (direction == "right") {
                                                                        if (sl_vertical == false) {
                                                                                $(sl_movingcontainer).css("left", "0px");
                                                                        }
                                                                        else {
                                                                                $(sl_movingcontainer).css("top", 0);
                                                                        }
                                                                        lastitem = false;

                                                                        $(sl_item.eq(sl_itemcount)).remove();
                                                                }
                                                                if (direction == "left") {
                                                                        $(".sl_item:eq(0)", this).remove();
                                                                        if (sl_vertical == false) {
                                                                                var fromleft = (sl_itemwidth * (sl_itemcount - 1)) * -1;
                                                                                $(sl_movingcontainer).css("left", fromleft + "px");
                                                                        }
                                                                        else {
                                                                                var fromtop = (sl_itemheight * (sl_itemcount - 1)) * -1;
                                                                                $(sl_movingcontainer).css("top", fromtop + "px");
                                                                        }
                                                                        firstitem = false;
                                                                }
                                                        }

                                                        /* BRUENDL */

                                                        heading.fadeIn(500);

                                                        /* BRUENDL END */

                                                }
                                                );
                        }

                        // ************** ANIMATE FUNCTION ************** // differs between slide and fade

                        function Animation(direction, fade, times) {

                                if (sl_continuous == false) {
                                        if (direction == "right") {
                                                if ($(sl_leftarrow).hasClass("ishidden")) {
                                                        $(sl_leftarrow).removeClass("ishidden");
                                                }
                                        }
                                        else {
                                                if ($(sl_rightarrow).hasClass("ishidden")) {
                                                        $(sl_rightarrow).removeClass("ishidden");
                                                }
                                        }
                                }

                                // Position Adjustments

                                function AppendFirstItem() {
                                        lastitem = true;
                                        var firstitemtomove = $(sl_item.eq(0));
                                        $(firstitemtomove).clone().appendTo(sl_movingcontainer);
                                }

                                function PrependLastItem() {
                                        firstitem = true;
                                        var lastitemtomove = $(sl_item.eq(sl_itemcount - 1));
                                        $(lastitemtomove).clone().prependTo(sl_movingcontainer);

                                }

                                if (direction == "right") {
                                        if (sl_continuous == false) {
                                                sl_currentpos = sl_currentpos + (1 * times);
                                                if (sl_currentpos > 0) {
                                                        $(sl_leftarrow).removeClass("ishidden");
                                                }
                                                if (sl_currentpos == (sl_itemcount - sl_visibleitems)) {
                                                        $(sl_rightarrow).addClass("ishidden");
                                                }
                                        }
                                        else {
                                                if ((sl_currentpos + 1) == sl_itemcount) {
                                                        AppendFirstItem();
                                                }
                                                sl_currentpos++;
                                                if (sl_currentpos == sl_itemcount) {
                                                        sl_currentpos = 0;
                                                }

                                        }
                                }
                                else {
                                        if (sl_continuous == false) {
                                                sl_currentpos = sl_currentpos - (1 * times);
                                                if (sl_currentpos == 0) {
                                                        $(sl_leftarrow).addClass("ishidden");
                                                }
                                        }
                                        else {

                                                if ((sl_currentpos) == 0) {
                                                        PrependLastItem();
                                                }
                                                sl_currentpos--;
                                                if (sl_currentpos == -1) {
                                                        sl_currentpos = (sl_itemcount - 1);
                                                }


                                        }
                                }

                                if (fade == true) {
                                        Fade(direction, sl_fadingspeed, times);
                                }
                                else {
                                        Slide(direction, sl_animationspeed, times);
                                }

                                // Thumb Adjustments

                                if (sl_thumbs == true) {
                                        $(".thumb", sl_thumbscontainer).removeClass("current");
                                        $(".thumb:eq(" + (sl_currentpos) + ")").addClass("current");
                                }

                                // Nr Adjustments

                                if (sl_numbers == true) {
                                        $("li.current", sl_numberscontainer).removeClass("current");
                                        $("li:eq(" + (sl_currentpos) + ")", sl_numberscontainer).addClass("current");
                                }

                                return false;

                        }

                        ;

                        // CLICK RIGHT ARROW

                        $(sl_rightarrow).click(
                                        function() {
                                                StopInterval();
                                                Animation("right", false, 1);
                                                return false;
                                        }
                                        )

                        // CLICK LEFT ARROW

                        $(sl_leftarrow).click(
                                        function() {
                                                StopInterval();
                                                Animation("left", false, 1);
                                                return false;
                                        }
                                        )

                        // APPEND NUMBERS

                        if (sl_numbers == true) {
                                for (i = 1; i <= sl_itemcount; i++) {
                                        $(sl_numberscontainer).append("<li><div class='stresslayer'></div><a href='#' >" + i + "</a></li>");
                                }
                                $("li:eq(0)", sl_numberscontainer).addClass("current");
                        }

                        // NUMBERS CLICK FUNCTIONS

                        $("li a", sl_numberscontainer).bind( {

                                click: function() {

                                        StopInterval();
                                        var currentnr = 0;
                                        for (i = 0; i < sl_itemcount; i++) {
                                                var thisclass = $("li:eq(" + i + ")", sl_numberscontainer).attr("class");
                                                if (thisclass == "current") {
                                                        var currentnr = i;
                                                        break;
                                                }
                                        }

                                        $("li", sl_numberscontainer).removeClass("current");
                                        $(this).parent().addClass("current");

                                        var clickpos = 0;

                                        for (i = 0; i < sl_itemcount; i++) {
                                                var thisclass = $("li:eq(" + i + ")", sl_numberscontainer).attr("class");
                                                if (thisclass == "current") {
                                                        var clickpos = i;
                                                        break;
                                                }
                                        }

                                        /* TECHNODAT BEGIN */

                                        var currentimg = images[i];


                                        $("<img />").prependTo("#background_container").attr("src",currentimg);
                                        $('#background_container').onImagesLoad({
                                                selectorCallback: function() {
                                                        $("<div class='bgimage'>").prependTo("#background_container").attr("style", "background-image: url(" + currentimg + ");");
                                                        $("img","#background_container").remove();
                                                        $(".stresslayer").show();
                                                        $("#background_container .bgimage:last").fadeOut(600, function() {
                                                        $("#background_container .bgimage:last").remove();
                                                                $(".stresslayer").hide();
                                                        });
                                                }
                                        });

                                        /* TECHNODAT END */

                                        var difference = currentnr - clickpos;
                                        difference = Math.abs(difference);

                                        if (currentnr > clickpos) {
                                                for (i = 1; i <= difference; i++) {
                                                        Animation("left", false, difference);
                                                }
                                        }
                                        else {
                                                for (i = 1; i <= difference; i++) {
                                                        Animation("right", false, difference);
                                                }
                                        }

                                        if (sl_numbers == true) {
                                                $("li.current", sl_numberscontainer).removeClass("current");
                                                $("li:eq(" + clickpos + ")", sl_numberscontainer).addClass("current");
                                        }

                                        sl_currentpos = clickpos;

                                        if (sl_thumbs == true) {
                                                $(".thumb", sl_thumbscontainer).removeClass("current");
                                                $(".thumb:eq(" + (sl_currentpos) + ")").addClass("current");
                                        }

                                        return false;

                                }
                        });

                        // SHOW THUMBNAILS

                        if (sl_thumbs == true) {
                                $(sl_bar).hover(function() {
                                        $(sl_thumbscontainer).fadeIn("fast");
                                }, function() {
                                        $(sl_thumbscontainer).fadeOut("fast");
                                });
                        }

                        // THUMBNAIL CLICK FUNCTIONS

                        $(".thumb a", sl_thumbscontainer).bind( {

                                click: function() {
                                        
                                        StopInterval();
                                        var currentthumb = 0;
                                        for (i = 0; i < sl_itemcount; i++) {
                                                var thisclass = $(".thumb:eq(" + i + ")", sl_thumbscontainer).attr("class");
                                                if (thisclass == "thumb current") {
                                                        var currentthumb = i;
                                                        break;
                                                }
                                        }

                                        $(".thumb", sl_thumbscontainer).removeClass("current");
                                        $(this).parent().addClass("current");

                                        var clickpos = 0;

                                        for (i = 0; i < sl_itemcount; i++) {
                                                var thisclass = $(".thumb:eq(" + i + ")", sl_thumbscontainer).attr("class");
                                                if (thisclass == "thumb current") {
                                                        var clickpos = i;
                                                        break;
                                                }
                                        }

                                        var difference = currentthumb - clickpos;
                                        difference = Math.abs(difference);

                                        if (currentthumb > clickpos) {
                                                for (i = 1; i <= difference; i++) {
                                                        Animation("left", false, difference);
                                                }
                                        }
                                        else {
                                                for (i = 1; i <= difference; i++) {
                                                        Animation("right", false, difference);
                                                }
                                        }

                                        if (sl_numbers == true) {
                                                $("li.current", sl_numberscontainer).removeClass("current");
                                                $("li:eq(" + clickpos + ")", sl_numberscontainer).addClass("current");
                                        }

                                        sl_currentpos = clickpos;

                                        if (sl_thumbs == true) {
                                                $(".thumb", sl_thumbscontainer).removeClass("current");
                                                $(".thumb:eq(" + (sl_currentpos) + ")").addClass("current");
                                        }

                                        return false;
                                }
                        });

                        // AUTOPLAY FUNCTION

                        if (options.autoplay == true) {
                                function AnimateThis() {
                                        Animation("right", false, 1);
                                }

                                var interval = setInterval(AnimateThis, options.autoplayspeed);
                        }

                        function StopInterval() {
                                interval = clearInterval(interval);
                        }


                });
        };
})(jQuery);

 
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.