Back To Programming / Scripting / Coding Forum

Random Image Script

  • tommya
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Mar 17, 2004
  • Posts: 221
  • Loc: United Kingdom
  • Status: Offline

Post September 15th, 2004, 1:19 pm

Hi,

I am using the following script that I picked up from elsewhere and adapted. However, I want it to display 2 random images and not just the one as this does. I also dont want the 2 random images to ever be the same. Can anybody help

Code: [ Select ]
<SCRIPT LANGUAGE="JavaScript">
    <!--
    function random_imglink(){
    var myimages=new Array()
     myimages[1]="/images/1.jpg"
     myimages[2]="/images/2.jpg"
     myimages[3]="/images/3.jpg"
     myimages[4]="/images/4.jpg"
     myimages[5]="/images/5.jpg"
     myimages[6]="/images/6.jpg"
     myimages[7]="/images/7.jpg"
     myimages[8]="/images/8.jpg"

    var ry=Math.floor(Math.random()*myimages.length)
    if (ry==0)
    ry=1
    document.write('<IMG SRC="'+myimages[ry]+'" BORDER=0><p>')
    }
    random_imglink()
    //-->
    </SCRIPT>

<NOSCRIPT><IMG SRC="images/8.jpg" BORDER=0"></NOSCRIPT>
  1. <SCRIPT LANGUAGE="JavaScript">
  2.     <!--
  3.     function random_imglink(){
  4.     var myimages=new Array()
  5.      myimages[1]="/images/1.jpg"
  6.      myimages[2]="/images/2.jpg"
  7.      myimages[3]="/images/3.jpg"
  8.      myimages[4]="/images/4.jpg"
  9.      myimages[5]="/images/5.jpg"
  10.      myimages[6]="/images/6.jpg"
  11.      myimages[7]="/images/7.jpg"
  12.      myimages[8]="/images/8.jpg"
  14.     var ry=Math.floor(Math.random()*myimages.length)
  15.     if (ry==0)
  16.     ry=1
  17.     document.write('<IMG SRC="'+myimages[ry]+'" BORDER=0><p>')
  18.     }
  19.     random_imglink()
  20.     //-->
  21.     </SCRIPT>
  23. <NOSCRIPT><IMG SRC="images/8.jpg" BORDER=0"></NOSCRIPT>
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post September 15th, 2004, 1:19 pm

  • lucassix
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Sep 13, 2004
  • Posts: 2344
  • Loc: Living in a VAN DOWN BY THE RIVER!
  • Status: Offline

Post September 16th, 2004, 7:01 pm

If you want two random images, can't you just run the script twice? If you want them side by side, just put them in a table that has 2 columns, 1 row, with no border. I'm not sure about not having it repeat...
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Sep 10, 2004
  • Posts: 2194
  • Loc: Canada
  • Status: Offline

Post September 16th, 2004, 10:26 pm

here's one for php:
Code: [ Select ]
<?php
// total number of images
$total = "8";

// file extension
$file_type = ".jpg";

// the first file (they must be in numerical order)
$start = "1";

// randomize
$random = mt_rand($start, $total);

// randomize another variable
$random2 = mt_rand($start + 1, $total);

// try and make them not different if they were
if($random2 == $random){
  $random2 = mt_rand($start + 1, $total);
  }

// get a filename from random
$image_name = $random . $file_type;

// make another (because you want 2)
$image_name2 = $random . $file_type;

echo "<img src=\"images/$image_name\" width=\"x\" height=\"x\"><img src=\"images/$image_name2\" width=\"x\" height=\"x\">";
?>
  1. <?php
  2. // total number of images
  3. $total = "8";
  5. // file extension
  6. $file_type = ".jpg";
  8. // the first file (they must be in numerical order)
  9. $start = "1";
  11. // randomize
  12. $random = mt_rand($start, $total);
  14. // randomize another variable
  15. $random2 = mt_rand($start + 1, $total);
  17. // try and make them not different if they were
  18. if($random2 == $random){
  19.   $random2 = mt_rand($start + 1, $total);
  20.   }
  22. // get a filename from random
  23. $image_name = $random . $file_type;
  25. // make another (because you want 2)
  26. $image_name2 = $random . $file_type;
  28. echo "<img src=\"images/$image_name\" width=\"x\" height=\"x\"><img src=\"images/$image_name2\" width=\"x\" height=\"x\">";
  29. ?>

its quick and dirty but it'll get the job done.

yes i know this could be improved alot better haha but im tired
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post September 17th, 2004, 8:48 am

Code: [ Select ]
<SCRIPT LANGUAGE="JavaScript">
  <!--
  function random_imglink(){
  var myimages=new Array()
  myimages[1]="/images/1.jpg"
  myimages[2]="/images/2.jpg"
  myimages[3]="/images/3.jpg"
  myimages[4]="/images/4.jpg"
  myimages[5]="/images/5.jpg"
  myimages[6]="/images/6.jpg"
  myimages[7]="/images/7.jpg"
  myimages[8]="/images/8.jpg"

  var ry=Math.floor(Math.random()*myimages.length)
  if(ry<1) ry++;
  var ry2=Math.floor(Math.random()*myimages.length)
  if(ry2<1) ry2++;
  if(ry == ry2){ry>1 ? ry2-- : ry2++;}
  //alert(ry + "|" + ry2);
  document.write('<IMG SRC="'+myimages[ry]+'" BORDER=0><p>')
  document.write('<IMG SRC="'+myimages[ry2]+'" BORDER=0><p>')
  }
  random_imglink()
  //-->
  </SCRIPT>
  1. <SCRIPT LANGUAGE="JavaScript">
  2.   <!--
  3.   function random_imglink(){
  4.   var myimages=new Array()
  5.   myimages[1]="/images/1.jpg"
  6.   myimages[2]="/images/2.jpg"
  7.   myimages[3]="/images/3.jpg"
  8.   myimages[4]="/images/4.jpg"
  9.   myimages[5]="/images/5.jpg"
  10.   myimages[6]="/images/6.jpg"
  11.   myimages[7]="/images/7.jpg"
  12.   myimages[8]="/images/8.jpg"
  14.   var ry=Math.floor(Math.random()*myimages.length)
  15.   if(ry<1) ry++;
  16.   var ry2=Math.floor(Math.random()*myimages.length)
  17.   if(ry2<1) ry2++;
  18.   if(ry == ry2){ry>1 ? ry2-- : ry2++;}
  19.   //alert(ry + "|" + ry2);
  20.   document.write('<IMG SRC="'+myimages[ry]+'" BORDER=0><p>')
  21.   document.write('<IMG SRC="'+myimages[ry2]+'" BORDER=0><p>')
  22.   }
  23.   random_imglink()
  24.   //-->
  25.   </SCRIPT>


Easiest way is give the function more to do. Just needs to have the doc..write()s modified & the NOSCRIPT tag updated to use two defaults.

I just duplicated the random assignment, check if the ry numbers are the same, if they are the same check if they are greater than 1, if they are greater than one knock 1 off of ry2 else add 1 to it.
Strong with this one, the sudo is.
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Aug 07, 2004
  • Posts: 1853
  • Status: Offline

Post September 17th, 2004, 9:25 am

The problem with that is that the randomness is not evenly distributed, and it won't even get a chance of hitting the highest-numbered image (instead, the lowest-numbered image would get hit twice as often).

Use this instead:

Code: [ Select ]
<script type="text/javascript">
  <!--
  function random_imglink(){
  var myimages=new Array()
  myimages[0] = "/images/0.jpg"
  myimages[1] = "/images/1.jpg"
  myimages[2] = "/images/2.jpg"
  myimages[3] = "/images/3.jpg"
  myimages[4] = "/images/4.jpg"
  myimages[5] = "/images/5.jpg"
  myimages[6] = "/images/6.jpg"
  myimages[7] = "/images/7.jpg"

  var ry=Math.floor(Math.random()*myimages.length)
  // if(ry<1) ry++; not needed because array is zero-based.

  var rya=Math.floor(Math.random()*(myimages.length - 1))
  // now this SECOND piece of code will pick a random number
  // of length myimages.length - 1.
  if(rya >= ry) rya++; //now increment rya if it needs it.
  // even if rya is greater than ry, it still needs incrementation
  // because rya needs to be evenly distributed across the
  // myimages.length - 1 remaining options.
 
  // document.write(ry + " | " + rya);
  document.write('<IMG SRC="'+myimages[ry]+'" BORDER=0><p>')
  document.write('<IMG SRC="'+myimages[rya]+'" BORDER=0><p>')

  }
  random_imglink()
  // -->
</script>
  1. <script type="text/javascript">
  2.   <!--
  3.   function random_imglink(){
  4.   var myimages=new Array()
  5.   myimages[0] = "/images/0.jpg"
  6.   myimages[1] = "/images/1.jpg"
  7.   myimages[2] = "/images/2.jpg"
  8.   myimages[3] = "/images/3.jpg"
  9.   myimages[4] = "/images/4.jpg"
  10.   myimages[5] = "/images/5.jpg"
  11.   myimages[6] = "/images/6.jpg"
  12.   myimages[7] = "/images/7.jpg"
  14.   var ry=Math.floor(Math.random()*myimages.length)
  15.   // if(ry<1) ry++; not needed because array is zero-based.
  17.   var rya=Math.floor(Math.random()*(myimages.length - 1))
  18.   // now this SECOND piece of code will pick a random number
  19.   // of length myimages.length - 1.
  20.   if(rya >= ry) rya++; //now increment rya if it needs it.
  21.   // even if rya is greater than ry, it still needs incrementation
  22.   // because rya needs to be evenly distributed across the
  23.   // myimages.length - 1 remaining options.
  24.  
  25.   // document.write(ry + " | " + rya);
  26.   document.write('<IMG SRC="'+myimages[ry]+'" BORDER=0><p>')
  27.   document.write('<IMG SRC="'+myimages[rya]+'" BORDER=0><p>')
  29.   }
  30.   random_imglink()
  31.   // -->
  32. </script>


Incidentally, you could do this specific problem without an array of URLs, since the file names themselves are numbered. Later, they might not be, though, or they might have leading zeros, so keeping the array is a good idea.
  • Scorpius
  • Proficient
  • Proficient
  • User avatar
  • Joined: Mar 20, 2004
  • Posts: 401
  • Loc: Scorpion Hole
  • Status: Offline

Post September 17th, 2004, 10:59 am

Try this:
Code: [ Select ]
<script type="text/javascript">
  <!--
  function random_imglink(){
  var myimages=new Array()
  myimages[0] = "/images/0.jpg"
  myimages[1] = "/images/1.jpg"
  myimages[2] = "/images/2.jpg"
  myimages[3] = "/images/3.jpg"

  var myimagesa=new Array()
  myimagesa[0] = "/images/4.jpg"
  myimagesa[1] = "/images/5.jpg"
  myimagesa[2] = "/images/6.jpg"
  myimagesa[3] = "/images/7.jpg"

  var ry=Math.floor(Math.random()*myimages.length)

  var rya=Math.floor(Math.random()*(myimagesa.length))
 
  // document.write(ry + " | " + rya);
  document.write('<IMG SRC="'+myimages[ry]+'" BORDER=0><p>')
  document.write('<IMG SRC="'+myimagesa[rya]+'" BORDER=0><p>')

  }
  random_imglink()
  // -->
</script>
  1. <script type="text/javascript">
  2.   <!--
  3.   function random_imglink(){
  4.   var myimages=new Array()
  5.   myimages[0] = "/images/0.jpg"
  6.   myimages[1] = "/images/1.jpg"
  7.   myimages[2] = "/images/2.jpg"
  8.   myimages[3] = "/images/3.jpg"
  10.   var myimagesa=new Array()
  11.   myimagesa[0] = "/images/4.jpg"
  12.   myimagesa[1] = "/images/5.jpg"
  13.   myimagesa[2] = "/images/6.jpg"
  14.   myimagesa[3] = "/images/7.jpg"
  16.   var ry=Math.floor(Math.random()*myimages.length)
  18.   var rya=Math.floor(Math.random()*(myimagesa.length))
  19.  
  20.   // document.write(ry + " | " + rya);
  21.   document.write('<IMG SRC="'+myimages[ry]+'" BORDER=0><p>')
  22.   document.write('<IMG SRC="'+myimagesa[rya]+'" BORDER=0><p>')
  24.   }
  25.   random_imglink()
  26.   // -->
  27. </script>

I think this would probably be best and more random than the other ways, although you have two arrays, you will always have different images.
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Aug 07, 2004
  • Posts: 1853
  • Status: Offline

Post September 17th, 2004, 11:29 am

Actually, it is less random. There are 16 possible combinations of images in your example, 28 in my previous example (and in mine, the order is random too), and both avoid having the same image appear twice.

Why prevent 1.jpg and 2.jpg from being shown at the same time?
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post September 17th, 2004, 2:18 pm

Quote:
The problem with that is that the randomness is not evenly distributed, and it won't even get a chance of hitting the highest-numbered image (instead, the lowest-numbered image would get hit twice as often).

Sam there's no difference between our functions results, Both are just as random & they both take a maximum of 140 milliseconds to run 500 times on a 500mhz cpu....

Code: [ Select ]
<html>
<head>

<style type="text/css">
body{background:#123456; color:#ffffff;}
</style>

</head>
<body>
<div style="position:absolute; left:100px;">
<script type="text/javascript">
  <!--
  function random_imglin(){
  var myimages=new Array()
  myimages[0] = "/images/0.jpg"
  myimages[1] = "/images/1.jpg"
  myimages[2] = "/images/2.jpg"
  myimages[3] = "/images/3.jpg"
  myimages[4] = "/images/4.jpg"
  myimages[5] = "/images/5.jpg"
  myimages[6] = "/images/6.jpg"
  myimages[7] = "/images/7.jpg"
  var ry=Math.floor(Math.random()*myimages.length)
  var rya=Math.floor(Math.random()*(myimages.length - 1))
  if(rya >= ry) rya++; //now increment rya if it needs it.
  document.write(ry + "|" + rya + "<br>");
  }
time = new Date().getMilliseconds();
for(var i=0; i<500; i++){random_imglin();}
document.write(new Date().getMilliseconds() - time);
  // -->
</script>
</div>
<div style:position:absolute; left:0px;">
<SCRIPT LANGUAGE="JavaScript">
  <!--
  function random_imglink(){
  var myimages=new Array()
  myimages[1]="/images/1.jpg"
  myimages[2]="/images/2.jpg"
  myimages[3]="/images/3.jpg"
  myimages[4]="/images/4.jpg"
  myimages[5]="/images/5.jpg"
  myimages[6]="/images/6.jpg"
  myimages[7]="/images/7.jpg"
  myimages[8]="/images/8.jpg"

  var ry=Math.floor(Math.random()*myimages.length)
  if(ry<1) ry++;
  var ry2=Math.floor(Math.random()*myimages.length)
  if(ry2<1) ry2++;
  if(ry == ry2){ry>1 ? ry2-- : ry2++;}
  document.write(ry + "|" + ry2 + "<br>");
  }
time = new Date().getMilliseconds();
 for(var i=0; i<500; i++){random_imglink();}
document.write(new Date().getMilliseconds() - time);
  //-->
  </SCRIPT>
</div>


</body>
</html>
  1. <html>
  2. <head>
  4. <style type="text/css">
  5. body{background:#123456; color:#ffffff;}
  6. </style>
  8. </head>
  9. <body>
  10. <div style="position:absolute; left:100px;">
  11. <script type="text/javascript">
  12.   <!--
  13.   function random_imglin(){
  14.   var myimages=new Array()
  15.   myimages[0] = "/images/0.jpg"
  16.   myimages[1] = "/images/1.jpg"
  17.   myimages[2] = "/images/2.jpg"
  18.   myimages[3] = "/images/3.jpg"
  19.   myimages[4] = "/images/4.jpg"
  20.   myimages[5] = "/images/5.jpg"
  21.   myimages[6] = "/images/6.jpg"
  22.   myimages[7] = "/images/7.jpg"
  23.   var ry=Math.floor(Math.random()*myimages.length)
  24.   var rya=Math.floor(Math.random()*(myimages.length - 1))
  25.   if(rya >= ry) rya++; //now increment rya if it needs it.
  26.   document.write(ry + "|" + rya + "<br>");
  27.   }
  28. time = new Date().getMilliseconds();
  29. for(var i=0; i<500; i++){random_imglin();}
  30. document.write(new Date().getMilliseconds() - time);
  31.   // -->
  32. </script>
  33. </div>
  34. <div style:position:absolute; left:0px;">
  35. <SCRIPT LANGUAGE="JavaScript">
  36.   <!--
  37.   function random_imglink(){
  38.   var myimages=new Array()
  39.   myimages[1]="/images/1.jpg"
  40.   myimages[2]="/images/2.jpg"
  41.   myimages[3]="/images/3.jpg"
  42.   myimages[4]="/images/4.jpg"
  43.   myimages[5]="/images/5.jpg"
  44.   myimages[6]="/images/6.jpg"
  45.   myimages[7]="/images/7.jpg"
  46.   myimages[8]="/images/8.jpg"
  48.   var ry=Math.floor(Math.random()*myimages.length)
  49.   if(ry<1) ry++;
  50.   var ry2=Math.floor(Math.random()*myimages.length)
  51.   if(ry2<1) ry2++;
  52.   if(ry == ry2){ry>1 ? ry2-- : ry2++;}
  53.   document.write(ry + "|" + ry2 + "<br>");
  54.   }
  55. time = new Date().getMilliseconds();
  56.  for(var i=0; i<500; i++){random_imglink();}
  57. document.write(new Date().getMilliseconds() - time);
  58.   //-->
  59.   </SCRIPT>
  60. </div>
  63. </body>
  64. </html>


Perhaps you should actually test somthing before "noticing a problem" with it :wink:
Strong with this one, the sudo is.
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Aug 07, 2004
  • Posts: 1853
  • Status: Offline

Post September 17th, 2004, 6:24 pm

Actually maybe it hits the last image...

However, yours picks myimages[1] twice as often as it picks the rest of the images, because that image gets matched by random numbers in the interval [0,2), which has a width of two, whereas the others have ranges of [2,3), [3,4), which have widths of one. They are not "just as random." If you want to test it, fine:

Code: [ Select ]
<SCRIPT LANGUAGE="JavaScript">
  <!--
  function random_imglink(){
  var myimages=new Array()
  myimages[1]="/images/1.jpg"
  myimages[2]="/images/2.jpg"
  myimages[3]="/images/3.jpg"
  myimages[4]="/images/4.jpg"
  myimages[5]="/images/5.jpg"
  myimages[6]="/images/6.jpg"
  myimages[7]="/images/7.jpg"
  myimages[8]="/images/8.jpg"

  var ry=Math.floor(Math.random()*myimages.length)
  if(ry<1) ry++;
  var ry2=Math.floor(Math.random()*myimages.length)
  if(ry2<1) ry2++;
  if(ry == ry2){ry>1 ? ry2-- : ry2++;}
  document.write(ry + "|" + ry2 + "<br>");
 
  return ry;
  }
 var indexsum = new Array()
 for(var i = 1; i < 9; i++)
 {
  indexsum[i] = 0;
 }
  
 for(var i=0; i<10000; i++)
 {
  indexsum[random_imglink()]++;
  
 }
 
 for(var i = 1; i < 9; i++)
 {
  document.write("Index " + i + ": " + indexsum[i] + "<br>");
 }

  //-->
</SCRIPT>

  1. <SCRIPT LANGUAGE="JavaScript">
  2.   <!--
  3.   function random_imglink(){
  4.   var myimages=new Array()
  5.   myimages[1]="/images/1.jpg"
  6.   myimages[2]="/images/2.jpg"
  7.   myimages[3]="/images/3.jpg"
  8.   myimages[4]="/images/4.jpg"
  9.   myimages[5]="/images/5.jpg"
  10.   myimages[6]="/images/6.jpg"
  11.   myimages[7]="/images/7.jpg"
  12.   myimages[8]="/images/8.jpg"
  14.   var ry=Math.floor(Math.random()*myimages.length)
  15.   if(ry<1) ry++;
  16.   var ry2=Math.floor(Math.random()*myimages.length)
  17.   if(ry2<1) ry2++;
  18.   if(ry == ry2){ry>1 ? ry2-- : ry2++;}
  19.   document.write(ry + "|" + ry2 + "<br>");
  20.  
  21.   return ry;
  22.   }
  23.  var indexsum = new Array()
  24.  for(var i = 1; i < 9; i++)
  25.  {
  26.   indexsum[i] = 0;
  27.  }
  28.   
  29.  for(var i=0; i<10000; i++)
  30.  {
  31.   indexsum[random_imglink()]++;
  32.   
  33.  }
  34.  
  35.  for(var i = 1; i < 9; i++)
  36.  {
  37.   document.write("Index " + i + ": " + indexsum[i] + "<br>");
  38.  }
  40.   //-->
  41. </SCRIPT>


The results of one run:
Code: [ Select ]
Index 1: 2259
Index 2: 1095
Index 3: 1093
Index 4: 1059
Index 5: 1085
Index 6: 1134
Index 7: 1090
Index 8: 1185
  1. Index 1: 2259
  2. Index 2: 1095
  3. Index 3: 1093
  4. Index 4: 1059
  5. Index 5: 1085
  6. Index 6: 1134
  7. Index 7: 1090
  8. Index 8: 1185

Notice how image one gets chosen about 2/9 of the time, the rest getting chosen 1/9 of the time, instead of each being 1/8.

Perhaps you should actually test something before declaring them "just as random" ;-)
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post September 17th, 2004, 7:21 pm

There is another lesson to be learned from this,
"Never doubt a math major" :lol:
Strong with this one, the sudo is.
  • DY123
  • Born
  • Born
  • No Avatar
  • Joined: Jan 04, 2011
  • Posts: 1
  • Status: Offline

Post January 4th, 2011, 11:08 pm

Hi,

I came across an old duscussion about multiple random images.

programming-forum/random-image-script-t31615.html

In it you wrote some code to display 2 images. ry and rya.

I would like to add a third ryb.

I've added to your code and it all seems to work fine, but every so often I get a repeat of the images. ry and ryb will be the same.

I think where I need to fix this is in this line:
if(rya >= ry) rya++;

I've done this which I know is wrong:
if(ryb >= ry || ryb >= rya) ryb++;

Have any suggestions?

Thanks

Page 1 of 1

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 127 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.