random image on background slideshow

random image on background slideshow

Hello!

I'm using a jquery script to have a background image slideshow, but I can't make the images to shuffle. I need to do this, as on every click on the website, page reloads, and the background slideshow starts again on the first picture. I would prefer a random pic start.

The script so far is doing the job on covering the whole browser screen, fade on transition, and user controls (back, play / pause, next), wich I need to keep.


Any help would be terrific.

  1. var slideshowSpeed = 10000;

    var photos = [
        {
            "image" : "01.jpg",
            "url" : "http://www.domain.com/img",
            "firstline" : "text displayed under the pic",
        },
        {
            "image" : "02.jpg",
            "url" : "http://www.domain.com/img",
            "firstline" : "text displayed under the pic",
        },
        {
            "image" : "03.jpg",
            "url" : "http://www.domain.com/img",
            "firstline" : "text displayed under the pic",
        },
        {
            "image" : "04.jpg",
            "url" : "http://www.domain.com/img",
            "firstline" : "text displayed under the pic",
        },
    ];

    $(document).ready(function() {

        $("#back").click(function() {
            stopAnimation();
            navigate("back");
        });
       
        $("#next").click(function() {
            stopAnimation();
            navigate("next");
        });
       
        var interval;
        $("#control").toggle(function(){
            stopAnimation();
        }, function() {
            $(this).css({ "background-image" : "url(http://www.domain.com/img/pause.png)" });
           
            navigate("next");
           
            interval = setInterval(function() {
                navigate("next");
            }, slideshowSpeed);
        });
       
        var activeContainer = 1;   
        var currentImg = 0;
        var animating = false;
        var navigate = function(direction) {
            if(animating) {
                return;
            }
           
            if(direction == "next") {
                currentImg++;
                if(currentImg == photos.length + 1) {
                    currentImg = 1;
                }
            } else {
                currentImg--;
                if(currentImg == 0) {
                    currentImg = photos.length;
                }
            }
           
            var currentContainer = activeContainer;
            if(activeContainer == 1) {
                activeContainer = 2;
            } else {
                activeContainer = 1;
            }
           
            showImage(photos[currentImg - 1], currentContainer, activeContainer);
           
        };
       
        var currentZindex = -1;
        var showImage = function(photoObject, currentContainer, activeContainer) {
            animating = true;
           
            currentZindex--;
           
            $("#headerimg" + activeContainer).css({
                "background-image" : "url(http://www.domain.com/img/" + photoObject.image + ")",
                "display" : "block",
                "z-index" : currentZindex
            });
           
            $("#place").css({"display" : "none"});
           
            $("#firstline").html(photoObject.firstline);       
           
            $("#headerimg" + currentContainer).fadeOut(function() {
                setTimeout(function() {
                    $("#place").css({"display" : "block"});
                    animating = false;
                }, 750);
            });
        };
       
        var stopAnimation = function() {
            $("#control").css({ "background-image" : "url(http://www.domain.com/img/play.png)" });
           
            clearInterval(interval);
        };
       
        navigate("next");
       
        interval = setInterval(function() {
            navigate("next");
        }, slideshowSpeed);
       
    });





















































































































By the way, this script was found on www.marcofolio.net

Thxs.