jQuery Forum

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.