Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Help with multiple random images

    Here's the code I slightly modified from the source found on javascriptkit.com:

    Code:
    <script>
    function random_imglink(){
      var myimages = new Array()
        myimages[1] = "01.jpg"
        myimages[2] = "02.jpg"
        myimages[3] = "03.jpg"
        myimages[4] = "04.jpg"
        myimages[5] = "05.jpg"
        ...
        myimages[31] = "31.jpg"
    							
      var rq=Math.floor(Math.random()*myimages.length)
      var rr=Math.floor(Math.random()*myimages.length)
      var rs=Math.floor(Math.random()*myimages.length)
      var rt=Math.floor(Math.random()*myimages.length)
      var ru=Math.floor(Math.random()*myimages.length)
      var rv=Math.floor(Math.random()*myimages.length)
      var rw=Math.floor(Math.random()*myimages.length)
      var rx=Math.floor(Math.random()*myimages.length)
      var ry=Math.floor(Math.random()*myimages.length)
      var rz=Math.floor(Math.random()*myimages.length)
    
      if (ry==0)
        ry=1
        document.write('<img src="'+myimages[rq]+'"> &nbsp;<img src="'+myimages[rr]+'"><br><img src="'+myimages[rs]+'"> &nbsp;<img src="'+myimages[rt]+'"><br><img src="'+myimages[ru]+'"> &nbsp;<img src="'+myimages[rv]+'"><br><img src="'+myimages[rw]+'"> &nbsp;<img src="'+myimages[rx]+'"><br><img src="'+myimages[ry]+'"> &nbsp;<img src="'+myimages[rz]+'">')
    }
    random_imglink()
    </script>
    I have 8 IMGs grabbing images randomly from a list of 31 JPGs & here's my dilemma:
    1. I don't want the same image appearing in more than 1 spot
    2. When I test this, sometimes 1 or more IMG spots return an undefined image

    Any help would be greatly appreciated. Thanks in advance!

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,479
    Thanks
    0
    Thanked 635 Times in 625 Posts
    Shuffle the arrat and then grab as many as you need off the front.


    Code:
    Array.prototype.shuffle = function() {
       var s = [];
       while (this.length) s.push(this.splice(Math.random() * this.length, 1)[0]);
       while (s.length) this.push(s.pop());
       return this;
    }; 
    
    function random_imglink(){
      var myimages = []
        myimages[1] = "01.jpg"
        myimages[2] = "02.jpg"
        myimages[3] = "03.jpg"
        myimages[4] = "04.jpg"
        myimages[5] = "05.jpg"
        ...
        myimages[31] = "31.jpg"
    
    myimages.shuffle();
       
        var rq = myimages[0];
        var rr = myimages[1];
    // ... etc
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    sg123 (06-14-2012)

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That worked perfectly!

    Here's the fixed code block in case someone else is looking for the same solution:

    Code:
    Array.prototype.shuffle = function(){
    	var s = [];
    	while (this.length) s.push(this.splice(Math.random() * this.length, 1)[0]);
    	while (s.length) this.push(s.pop());
    	return this;
    };
    function random_imglink(){
    	var myimages = []
    		myimages[0] = "01.jpg"
    		myimages[1] = "02.jpg"
    		myimages[2] = "03.jpg"
    		myimages[3] = "04.jpg"
                    ...
    		myimages[30] = "31.jpg"
    
    		myimages.shuffle();
    
    		var rq = myimages[0];
    		var rr = myimages[1];
    		var rs = myimages[2];
                    ...
    		var rz = myimages[9];
    
    	document.write('<img src="images/thumbnails/'+rq+'"> &nbsp;<img src="images/thumbnails/'+rr+'"><br><img src="images/thumbnails/'+rs+'"> &nbsp;<img src="images/thumbnails/'+rt+'"><br><img src="images/thumbnails/'+ru+'"> &nbsp;<img src="images/thumbnails/'+rv+'"><br><img src="images/thumbnails/'+rw+'"> &nbsp;<img src="images/thumbnails/'+rx+'"><br><img src="images/thumbnails/'+ry+'"> &nbsp;<img src="images/thumbnails/'+rz+'">')
    }
    random_imglink()


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •