Alex Evans Portfolio

/* Author: 
Alex Evans
*/
var ss = {
    boxArray: [],
    bground: 0,
    myInterval: "",
    noBoxWide: 0,
    boxWidth: 0,
    boxHeight: 0,
    noBoxDeep: 0,
    sleepM: 100,
    sleepP: 100,
    slideInterval: 10000,
    currentTheme: 0,
    backgrounds: ["/slide/img/anchorman.jpg", "slide/img/anchorman2.jpg", "/slide/img/anchorman3.jpg"],
    themes: ["/slide/css/Aristo/Aristo.css", "/slide/css/flick/jquery-ui-1.8.16.css", "/slide/css/mint-choc/jquery-ui-1.8.16.css", "/slide/css/absolution/absolution.blue.css"],
    init: function(){
        "use strict";
        this.noBoxWide=$("#amountH").html();
        this.noBoxDeep=$("#amountV").html();
        this.boxWidth=Math.floor(1000/this.noBoxWide);
        this.boxHeight=Math.floor(500/this.noBoxDeep);
        this.plotBox();
        $("#controlSection").show();
        $("#slide").click(this.slider);
        //$("#viral").click(ss.viral);
        $("input.trans").click($.proxy(function(){
            this.randomizer($(this).attr("id"));
        },this));
        $('#themer').live("click",function(){
            ss.currentTheme += 1;
            if (ss.currentTheme === 4){
                ss.currentTheme = 0;
            }

            $("#controlSection").hide();
            var styleSheet = $("#styler").attr("href",ss.themes[ss.currentTheme]);
            styleSheet.load(function(){
                $("#controlSection").show();
            });
            $("#controlSection").show();
            
        });
    },
    setProgressBar: function(){
        "use strict";
        $("").css({
        "background": "black",
        "bottom": "-490px",
        "display": "block",
        "height": "10px",
        "left": "-1000px",
        "opacity":0.5,
        "min-height": "10px",
        "position": "relative",
        "width": "100%",
        "z-index": 5})
        .addClass("progressor").appendTo("#slider");
    },
    setBackground: function(dir){
        "use strict";
        if (dir === "Next"){
            this.bground++;    
        }
        if (dir === "Prev"){
            this.bground--;
        }
        if (this.bground === this.backgrounds.length){
            this.bground = 0;
        }
        if (this.bground === -1){
            this.bground = this.backgrounds.length;
        }
        return this.bground;
    },
    slider: function(){
        "use strict";
        var timer = 0,i = 0,j = 0;
        ss.setBackground("Next");
        for (i=ss.noBoxDeep;i>0;i--){
            for (j=ss.noBoxWide;j>0;j--){
                timer++;
                ss.sliderHandler(i,j,timer);
            }
        }
    },
    viral: function(){
        "use strict";
        var timer = 0,i = 0,j = 1, bbox = ss.boxArray.slice(0);
        ss.setBackground("Next");
        console.log(bbox);
        console.log(bbox.sort());
        
        while (j < ss.noBoxWide)
        {

            
            for (i;i<=ss.noBoxDeep;i++){
                console.log(i,j);
                ss.viralHandler(i,j,timer);  
            }
            i=0;
             j++;
           
            timer++;
            timer++;
            timer++;
        }       
    },
    sliderHandler:function(a,b,timer){
        "use strict";
        setTimeout(function() {ss.transitions.waterfall(a, b, ss.bground);}, timer * ss.sleepM);
    },
    viralHandler:function(a,b,timer){
        "use strict";
        setTimeout(function() {ss.transitions.waterfall(a, b, ss.bground);}, timer * ss.sleepM);
    },
    randomizer: function(){
        "use strict";
        //types (fader3, fader, flyin instant,injection,)
        var type = $('input[name=setting]:checked').attr("id"),
        randItemPos, randItem,
        bbox = ss.boxArray.slice(0),
        timer = 0, i = 0, j = 0;
        ss.setBackground("Next");
        
        for (i=ss.noBoxDeep;i>0;i--){
            for (j=ss.noBoxWide;j>0;j--){
                timer++;
                randItemPos = Math.floor(Math.random()*bbox.length),
                randItem = bbox.splice(randItemPos,1);
                ss.transitionHandler(randItem,timer,type);
                    
            }
        }
        setTimeout(function(){
            $(".tmp").remove();
        },(timer*ss.sleepM)+2000);
        $(".progressor").animate({"left":"0px"},ss.slideInterval,"linear",function(){
            $(this).css("left","-1000px");
        });
    },
    transitionHandler:function(item,timer,type){
        "use strict";
        setTimeout(function() {ss.transitions[type](item,ss.bground);}, timer*ss.sleepM);
    },
    transitions:{
        fader: function(i,bg){
            "use strict";
            $("."+i).animate({"opacity":"0.2"},200,function(){
                $(this).css({"background-image":"url("+ss.backgrounds[bg]+")"})
                .animate({"opacity":"1"},100);
            });
        },
        drop: function(i,bg){
            "use strict";
            var obj = $("."+i);
            $("").css({
                "background-image":"url("+ss.backgrounds[bg]+")",
                "background-position":obj.css("background-position"),
                "width":obj.width(),
                "height":obj.height(),
                "display":"none",
                "position":"absolute",
                "top":obj.position().top,
                "left":obj.position().left,
                "z-index":4})
                .appendTo("#slider").slideDown(300,"easeInQuint",function(){
                    $(this).remove();
                    obj.css({"background-image":"url("+ss.backgrounds[bg]+")"});
                });           
        },
        explodeIn: function(i,bg){
            "use strict";
            var obj = $("."+i);
            $("").css({
                "background-image":"url("+ss.backgrounds[bg]+")",
                "background-position":obj.css("background-position"), 
                "width":obj.width(),
                "height":obj.height(),
                "top":obj.position().top,
                "left":obj.position().left,
                "position":"absolute",
                "z-index":4})
                .appendTo("#slider")
                .hide("explode",{},1000,function(){
                    $(this).remove();
                });
                obj.css({"background-image":"url("+ss.backgrounds[bg]+")"});               
        },
        flyin: function(i,bg){
            "use strict";
            var obj = $("."+i);
            $("").css({
                "background-image":"url("+ss.backgrounds[bg]+")",
                "background-position":obj.css("background-position"),
                "width":obj.width(),
                "height":obj.height(),
                "position":"absolute",
                "z-index":4})
                .appendTo("#slider")
                .animate({
                    "top":obj.position().top,
                    "left":obj.position().left
                },1000,function(){
                    $(this).css({"background-image":"none"});
                    $(this).animate({backgroundColor: '#000'},200,function(){
                        $(this).remove();  
                    });
                    obj.css({"background-image":"url("+ss.backgrounds[bg]+")"});
                });
        },
        circle: function(i,bg){
            "use strict";
            var obj = $("."+i);
            
            $("").css({
                "background-image":obj.css("background-image"),
                "background-position":obj.css("background-position"), 
                "width":obj.width(),
                "height":obj.height(),
                "top":obj.position().top,
                "left":obj.position().left,
                "position":"absolute",
                "z-index":4})
                .appendTo("#slider").addClass("tmp")
                .animate({
                    "top":obj.position().top+(obj.height()/2),
                    "left":obj.position().left+(obj.width()/2),
                     borderTopLeftRadius: "50%", 
                borderTopRightRadius: "50%", 
                borderBottomLeftRadius: "50%", 
                borderBottomRightRadius: "50%",
                WebkitBorderTopLeftRadius: "50%", 
                WebkitBorderTopRightRadius: "50%", 
                WebkitBorderBottomLeftRadius: "50%", 
                WebkitBorderBottomRightRadius: "50%", 
                MozBorderRadius: "50%",
                    width:"0px",
                    height:"0px"
                },1000,function(){
                    obj.css({"background-image":"url("+ss.backgrounds[bg]+")"});
                });
                obj.css({"background-image":"url("+ss.backgrounds[bg]+")"});
        },
        instant: function(i,bg){
            "use strict";
            $("."+i).css({"background-image":"url(" + ss.backgrounds[bg] + ")"});
        },
        inject: function(i,bg){
            "use strict";
            $("."+i).css("z-index",1).animate({"top":"-100px"},300,function(){
                $(this).css({"background-image":"url(" + ss.backgrounds[bg] + ")","top":"100px","z-index":2})
                .animate({"top":"0px"},300);
            });
        },
        transition: function(i,bg){
            "use strict";
            $("."+i).animate({"left":"-200px","top":"-200px"},1000,function(){
                $(this).css({"background-image":"url("+ ss.backgrounds[bg]+ ")","left":"200px"})
                .animate({"left":0,"top":0},1000);
            });
        },
        transFade: function (i,bg){
            "use strict";
            $("."+i).animate({"left":"-200px","top":"-200px","opacity":5},500,function(){
                $(this).animate({"top":0,"opacity":0},500, function(){
                    $(this).css({"background-image":"url(" + ss.backgrounds[bg] + ")","left":"200px","top":"200px"})
                    .animate({"left":0,"top":"-200px","opacity":1},500, function(){
                        $(this).animate({"top":0},500);
                    });
                });
            });
        },
        replacer: function(i,j, bg){
            "use strict";
            var mybox = $("#slider div:first");
            mybox.remove();
            mybox.css({"background":"url(" + ss.backgrounds[bg] + ")",
            "background-position":j*ss.boxWidth +"px "+ i*ss.boxHeight+"px"})
            .appendTo("#slider");
        },
        waterfall: function(i,j, bg){
            "use strict";
            var item = "h"+j+"w"+i;
             var obj = $("."+item);
            $("").css({
                "background-image":"url(" + ss.backgrounds[bg] + ")",
                "background-position":obj.css("background-position"),
                "width":obj.width(),
                "height":obj.height(),
                "position":"absolute",
                "top":obj.position().top,
                "left":obj.position().left,
                "display":"none",
                "z-index":4})
                .appendTo("#slider").slideDown(300,"easeInQuint",function(){
                    $(this).remove();
                    obj.css({"background-image":"url("+ss.backgrounds[bg]+")"});
                });
        }
    },
    plotBox:function(){
        "use strict";
         clearInterval(ss.myInterval);
        $(".progressor").remove();
        $("#slider").html("").removeClass("load");
        var counter = 0;
        this.boxArray = [];
        var i, j;
        for (i=this.noBoxDeep;i>0;i--){
            for (j=this.noBoxWide;j>0;j--){
                counter++;
                $("").addClass("slideBox").addClass("h"+j+"w"+i).css({
                    "width":this.boxWidth,
                    "height":this.boxHeight,
                    "background-position":j*this.boxWidth +"px "+ i*this.boxHeight+"px",
                    "background-image":"url("+Image1.src+")"}).appendTo("#slider");
                this.boxArray.push("h"+j+"w"+i);
            }
        }
        ss.setProgressBar();
    }
};

$("button.btn2, #themer").button();
$("#setting").buttonset();
$("#play").button({"icons":{"primary": "ui-icon-play"},"text": false}).live("click",function(){
   ss.randomizer();
   ss.myInterval = setInterval(ss.randomizer,ss.slideInterval);
});
$("#stop").button({"icons": {"primary": "ui-icon-pause"},"text": false}).live("click", function(){
    clearInterval(ss.myInterval);
    $(".progressor").remove();
});
 $( "#horizontal" ).slider({
    range: "min", value: 8, min: 1, max: 25,
    change: function( event, ui ) {
       $( "#amountH" ).html(ui.value );
        ss.noBoxWide = ui.value; 
        ss.boxWidth = Math.floor(1000/ui.value);
        ss.plotBox();
    }
});
$( "#vertical" ).slider({
    range: "min", value: 4, min: 1, max: 25,
    change: function( event, ui ) {
        $( "#amountV" ).html(ui.value );
        ss.noBoxDeep = ui.value; 
        ss.boxHeight = Math.floor(500/ui.value);
        ss.plotBox();
    }
});
$( "#pause" ).slider({
    range: "min", value: 100, min: 1, step:10, max: 200,
    change: function( event, ui ) {
        $( "#pauseS" ).html(ui.value );
        ss.sleepM = ui.value; 
    }
});
$( "#timeout" ).slider({
    range: "min", value: 10, min: 5, step:1, max:25,
    change: function( event, ui ) {
        $( "#timeoutS" ).html(ui.value);
        ss.slideInterval = ui.value*1000; 
        ss.plotBox();
    }
});
var Image1= new Image();
var Image2 = new Image();
var Image3 = new Image();
$(function(){
    Image1.src = ss.backgrounds[0];   
    Image2.src = ss.backgrounds[1];
    Image3.src = ss.backgrounds[2];
    $(window).load(
        function() {
            ss.init();
        }
    );
})
Horizontal boxes:8	Vertical boxes: 4	Transition Interval: 100	Slide Interval: 10
AlexEvans.name

Custom Jquery Slider Written a long time ago!

Code Bits Jquery Slider Probably out of Date
