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 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Need some randomness in script

    Hi, I have a slideshow script that will changes images. I would like them to appear randomly rather than numerical sequence, can someone hook me up with the proper code? Thanks!

    <script type="text/javascript">

    var currPic=1;

    var totPics=25;

    var keepTime;

    function setupPicChange()

    { keepTime=setTimeout("changePic()", 5000); }

    function changePic()

    { currPic++; if(currPic>totPics) currPic=1;

    document.getElementById("picture").src="pic"+currPic+".jpg";

    setupPicChange(); }

    </script>

  • #2
    Regular Coder
    Join Date
    Aug 2012
    Posts
    142
    Thanks
    0
    Thanked 25 Times in 25 Posts
    This may not be the most effienct way, i'm there are way better scripts but just to add onto your current script just added an additional function:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function rand(){
    var rand = Math.floor(Math.random()*10);
    return rand;
    }
    
    function setupPicChange(){
    keepTime=setTimeout("changePic()", 5000); 
    }
    
    function changePic(){
    var x = rand();
    document.getElementById("picture").src ="pic"+x+".jpg"
    setupPicChange();
    }
    </script>
    </head>
    <body>
    <p id="picture"></p>
    <button type="button" onclick="setupPicChange()">Picture Change</button>
    
    </body>
    </html>
    Hope this helps
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for? Jesus is returning very soon

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,591
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    First of all, he has 25 images, not just 10.

    Secondly, his pix are numbered starting at 1, not 0.

    And lastly, there is nothing in that code to prevent the same picture from being selected twice in a row...or more.

    So...rewrite time.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Regular Coder
    Join Date
    Aug 2012
    Posts
    142
    Thanks
    0
    Thanked 25 Times in 25 Posts
    Quote Originally Posted by Old Pedant View Post
    First of all, he has 25 images, not just 10.

    Secondly, his pix are numbered starting at 1, not 0.

    And lastly, there is nothing in that code to prevent the same picture from being selected twice in a row...or more.

    So...rewrite time.
    thanks captain obvious...this was just to help get in the right direction...but i'll get back on drawing board to accommodate your i mean his request =) and as always still a learning process
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for? Jesus is returning very soon

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,029
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    Shuffle the pics into a random order at the outset, then take them in sequence.

    Use the search feature of this forum - there have been several examples recently.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,591
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    Untested, but give this a shot:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <img id="picture" alt="a picture" />
    
    <script type="text/javascript">
    var nums = [];
    for ( var n = 0; n < 25; ++n ) { nums[n] = n+1; }
    
    function shuffle( )
    {
        var newnums = [];
        for ( var n = nums.length; n >= 1; --n )
        {
            var rand = Math.floor( Math.random() * n );
            newnums.push( nums[rand] );
            nums[rand] = nums[n-1];
        }
        return newnums;
    }
    
    var curpic = 999999; // so shuffle will happen on first call to nextPic
    function nextPic( )
    {
        ++curpic;
        if ( curpic >= nums.length )
        {
            nums = shuffle();
            curpic = 0;
        }
        document.getElementById("picture").src = "pic" + nums[curpic] + ".jpg";
    }
    
    // start it up
    nextPic( );
    
    // and do it again every 5 seconds:
    setInterval( nextPic, 5000 );
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,029
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    Code:
    <script type="text/javascript">
    
    Array.prototype.shuffle = function() {
    var s = [];
    while (this.length) s.push(this.splice(Math.random() * this.length, 1));
    while (s.length) this.push(s.pop());
    return this;
    }
    
    var images= ["One.gif", "Two.gif", "Three.gif", "Four.gif","Five.gif","Six.gif", "Seven.gif", "Eight.gif"];  // and so on to 25
    var newarray = images.shuffle();
    alert (newarray);  // inspect result
    alert (newarray[0]);  // first image
    
    </script>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    lateball (06-26-2013)

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,591
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    Minor goof in there, Philip:
    Code:
    while (this.length) s.push(this.splice(Math.floor(Math.random() * this.length), 1));
    At least I think so. I'm pretty sure that when you ask JavaScript to convert a floating point number to int as part of a function execution that it will round the number instead of using the floor() of it. Hmmm...now you make me really curious. I'll have to try it.

    The other thing missing from that (which is not an error; you just didn't show it) is of course what to do after all images have been shown (which is, of course, shuffle again and start over).

    EDIT: Oh, well. See next post.
    Last edited by Old Pedant; 06-25-2013 at 09:44 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,591
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    Well, I'm wrong, yet again.
    Code:
    <script type="text/javascript">
    var nums = [ 0, 1, 2, 3, 4, 5, 6, 7 ];
    var pick = 4.8;
    
    nums.splice( pick, 1 );
    alert( nums );
    </script>
    And, of course, that indeed removes element 4, not 5 as I would have expected.

    So ignore my prior post.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Wow, you guys are awesome. Thanks.

  • #11
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    It seems I've got a little glitch. Here's the test page:
    http://sticky-icky.com/index2.html

  • #12
    Regular Coder
    Join Date
    Aug 2012
    Posts
    142
    Thanks
    0
    Thanked 25 Times in 25 Posts
    So i know this may have been resolved already however i wanted to update the random number generator that now should not have sequentially repeating values (values repeat but should not repeat in a row...ie, 1,1 or 2,2)

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    var drawn = []; //global array (not sure if this is good but for now...)
    
    function run(){
    var x = Math.floor((Math.random()*22)+1); //create random number from 1 - 22;
    drawn.push(x);  //pass in random number into array drawn
    if(drawn.length>1){  //if length of array is 2 then if statement goes into effect
     if(drawn[0]==drawn[1]){  //nested if statement to compare first two values of array drawn
    drawn.splice(1,1);  //remove current x value if true
    run();  //run function again
    }
    else{ // if values don't equal then do this
    drawn.splice(0,1); //remove first array value
    }
    }
    return drawn; // return single array value (...should just be one number.....)
    }
    
    function setupPicChange(){
    keepTime=setTimeout("changePic()", 5000); 
    }
    
    function changePic(){
    var x = run();//get value from function return
    document.getElementById("picture").src ="pic"+x+".jpg"
    setupPicChange();
    }
    </script>
    </head>
    <body>
    <p id="picture"></p>
    
    <button type="button" onclick="setupPicChange()">Picture Change</button>
    
    </body>
    </html>
    Last edited by Brandnew; 06-26-2013 at 07:21 AM. Reason: updated random number to 22 to match current version
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for? Jesus is returning very soon

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,029
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    Code:
    <html>
    <head>
    </head>
    <body>
    
    <script type = "text/javascript">
    
    // random numbers no repeat in sequence of three  (e.g.  flash cards)
    
    var myArray = ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K"];
    var chosen = [];
    
    var cnt = 0;
    var previous = 0;
    var beforethat = 0;
    var len = myArray.length
    
    for (var i=0; i<12; i++) {
    
    while ((cnt == previous) || (cnt == beforethat)) {
    cnt = Math.floor(Math.random()*len);
    }
    beforethat = previous;
    previous = cnt;
    //alert (cnt);  // for testing
    chosen[i] = myArray[cnt];
    }
    
    alert (chosen);
    
    </script>
    
    
    </body>
    </html>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #14
    Regular Coder
    Join Date
    Aug 2012
    Posts
    142
    Thanks
    0
    Thanked 25 Times in 25 Posts
    Quote Originally Posted by lateball View Post
    It seems I've got a little glitch. Here's the test page:
    http://sticky-icky.com/index2.html
    i think your running dream weaver thus this may or may not be the issue you find, but i notice you have two call outs for the
    Code:
       document.getElementById("picture").src = "pic" + nums[curpic] + ".jpg";
    One in your nextPic() function and
    Code:
    document.getElementById("picture").src="pic"+currPic+".jpg";
    one in your setUpPicChange(). Both of which are being called...your onload calls setUpPicChange and you have the nextPic() function called plus the setInterval. So maybe one of these is causing for the quick change on some of your pics...
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for? Jesus is returning very soon

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,591
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    Quote Originally Posted by lateball View Post
    It seems I've got a little glitch. Here's the test page:
    http://sticky-icky.com/index2.html
    **SIGH**

    You left in your OLD CODE *AND* added my code.
    So you have *TWO* pieces of code both trying to change the image.
    No wonder it glitches!

    Kill your old code.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    lateball (07-01-2013)


  •  

    Posting Permissions

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