#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    38
    Rep Power
    2

    Getting a random number that doesn't repeat


    Hello all. I am trying to display images, each named after a number (1.jpg, 2.jpg, etc). I want them all cycled through randomly before any are displayed again. Through searching I understand that I need to put images being displayed into an array so they do not come up again but I admit that the syntax is above my understanding.

    The code I am using pulls a random number fine but they do repeat.

    Code:
    var x = 250; //250 images
    rand = Math.floor(Math.random()*x) + 1;
    I would greatly appreciate any guidance!
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,134
    Rep Power
    120
    Maybe something like this would work:
    Code:
    <style>
    #myImg {
     display:none;
    }
    </style>
    
    <script>
    
    var images_non_displayed = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];
    var images_displayed = [];
    
    var timer;
    
    function randomize()
    {
    var loop_count = 0;
    var x = images_non_displayed.length;
    rand = Math.floor(Math.random() * x);
    document.getElementById("myImg").src = images_non_displayed[rand];
    images_displayed.push(images_non_displayed[rand]);
    var key = images_non_displayed.indexOf(images_non_displayed[rand]);
    images_non_displayed.splice(key,1);
     if (loop_count < images_non_displayed.length){
      timer = setTimeout("randomize()",5000);
     }
     else {
      clearTimeout(timer);
      document.getElementById("myImg").style.display = "block";
     }
    }
    
    window.onload = function(){
     randomize();
    }
    
    </script>
    
    <img id="myImg"/>
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    38
    Rep Power
    2
    Thanks for the reply. Forgive me, javascript is certainly not my strength. Could you please explain what is going on in the code? I noticed there is a timer in your code. I do not need a timer. The next photo will display on a button click.

    Thanks
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,134
    Rep Power
    120
    Oh, ok well then we just need to re-work the code a little bit then; try this:
    Code:
    <style>
    #myImg {
     display:none;
    }
    </style>
    
    <script>
    
    var images_non_displayed = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];
    var images_displayed = [];
    
    function randomize()
    {
    var loop_count = 0;
    var x = images_non_displayed.length;
    rand = Math.floor(Math.random() * x);
     if (loop_count < images_non_displayed.length){
      document.getElementById("myImg").src = images_non_displayed[rand];
     }
    images_displayed.push(images_non_displayed[rand]);
    var key = images_non_displayed.indexOf(images_non_displayed[rand]);
    images_non_displayed.splice(key,1);
     if (loop_count == images_non_displayed.length){
      document.getElementById("myImg").style.display = "block";
     }
    }
    
    </script>
    
    <img id="myImg"/>
    
    <br/>
    <br/>
    
    <button onclick="randomize()">Get Random Image!</button>
    The idea behind the code; is that it cycles through each of the random images, before the image is displayed (which in the example I provided you... the image that is actually displayed is the final random image). What I did was take the image from one array, change the src attribute of the image (so that it would be the image in the array key... ie "1.jpg"), the image src (that is in the array key... which is basically just the name of the image file) is added to the second array for storage (for later use) and finally... the image src/filename is removed from the first array. This will allow the function to update the random number length (which is based on the first array's length) each time the button is clicked; where-by allowing the end user to only go through the exact amount of images that are in the first array and not giving them an undefined image/filename... which would result in the image not being displayed/view-able/usable by the end user... when the button is clicked. That process, also prevents the same image from being display multiple times (unless that was what you were going for... a infinite slideshow; if that's the case... you can still adapt the code to work in that fashion).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    38
    Rep Power
    2
    Thanks for the explanation. I probably should've stated how I am displaying the images earlier. Sorry. I am adding the variable 'rand' before '.jpg'. How can I still do it that way? (because that has worked well)

    Code:
    $("#page2 .ui-body-c").css("background-image","url(photo/" + rand + ".jpg)");
    }
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,134
    Rep Power
    120
    You should still be able to implement your code by combining it with mine; although... I think you are still going to have to store the "rand" number in an array/object and then check to see if the current "rand" number is in your array/object (prior to using the current "rand" number to change the div's background image); so that you will not get the same background image two or more times and/or so..., that you are able to cycle through all of the images and thus making sure you do not miss any background images (in your array/object) along the cycle.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    38
    Rep Power
    2
    I'll work on that this evening and let you know how it goes.

    Thanks so much for your help!
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    22
    Rep Power
    0
    This is how I would do

    Code:
    var max = 250;
    
    function rand() {
        this._arr = this._arr || [];
        if (this._arr.length >= max) {
            this._arr = [];
        } //repeat the random cycle once it repeats all numbers;
        var output;
        do {
            output = Math.floor(Math.random() * max) + 1;
        } while (this._arr.indexOf(output) != -1);
        this._arr.push(output);
        return output;
    }

IMN logo majestic logo threadwatch logo seochat tools logo