Random Image Script

  • tommya
  • Graduate
  • Graduate
  • tommya
  • Posts: 221
  • Loc: United Kingdom

Post 3+ Months Ago

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"
  13.     var ry=Math.floor(Math.random()*myimages.length)
  14.     if (ry==0)
  15.     ry=1
  16.     document.write('<IMG SRC="'+myimages[ry]+'" BORDER=0><p>')
  17.     }
  18.     random_imglink()
  19.     //-->
  20.     </SCRIPT>
  21. <NOSCRIPT><IMG SRC="images/8.jpg" BORDER=0"></NOSCRIPT>
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • lucassix
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2350
  • Loc: Indiana

Post 3+ Months Ago

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
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

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";
  4. // file extension
  5. $file_type = ".jpg";
  6. // the first file (they must be in numerical order)
  7. $start = "1";
  8. // randomize
  9. $random = mt_rand($start, $total);
  10. // randomize another variable
  11. $random2 = mt_rand($start + 1, $total);
  12. // try and make them not different if they were
  13. if($random2 == $random){
  14.   $random2 = mt_rand($start + 1, $total);
  15.   }
  16. // get a filename from random
  17. $image_name = $random . $file_type;
  18. // make another (because you want 2)
  19. $image_name2 = $random . $file_type;
  20. echo "<img src=\"images/$image_name\" width=\"x\" height=\"x\"><img src=\"images/$image_name2\" width=\"x\" height=\"x\">";
  21. ?>

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
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

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"
  13.   var ry=Math.floor(Math.random()*myimages.length)
  14.   if(ry<1) ry++;
  15.   var ry2=Math.floor(Math.random()*myimages.length)
  16.   if(ry2<1) ry2++;
  17.   if(ry == ry2){ry>1 ? ry2-- : ry2++;}
  18.   //alert(ry + "|" + ry2);
  19.   document.write('<IMG SRC="'+myimages[ry]+'" BORDER=0><p>')
  20.   document.write('<IMG SRC="'+myimages[ry2]+'" BORDER=0><p>')
  21.   }
  22.   random_imglink()
  23.   //-->
  24.   </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.
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

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"
  13.   var ry=Math.floor(Math.random()*myimages.length)
  14.   // if(ry<1) ry++; not needed because array is zero-based.
  15.   var rya=Math.floor(Math.random()*(myimages.length - 1))
  16.   // now this SECOND piece of code will pick a random number
  17.   // of length myimages.length - 1.
  18.   if(rya >= ry) rya++; //now increment rya if it needs it.
  19.   // even if rya is greater than ry, it still needs incrementation
  20.   // because rya needs to be evenly distributed across the
  21.   // myimages.length - 1 remaining options.
  22.  
  23.   // document.write(ry + " | " + rya);
  24.   document.write('<IMG SRC="'+myimages[ry]+'" BORDER=0><p>')
  25.   document.write('<IMG SRC="'+myimages[rya]+'" BORDER=0><p>')
  26.   }
  27.   random_imglink()
  28.   // -->
  29. </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
  • Posts: 401
  • Loc: Scorpion Hole

Post 3+ Months Ago

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"
  9.   var myimagesa=new Array()
  10.   myimagesa[0] = "/images/4.jpg"
  11.   myimagesa[1] = "/images/5.jpg"
  12.   myimagesa[2] = "/images/6.jpg"
  13.   myimagesa[3] = "/images/7.jpg"
  14.   var ry=Math.floor(Math.random()*myimages.length)
  15.   var rya=Math.floor(Math.random()*(myimagesa.length))
  16.  
  17.   // document.write(ry + " | " + rya);
  18.   document.write('<IMG SRC="'+myimages[ry]+'" BORDER=0><p>')
  19.   document.write('<IMG SRC="'+myimagesa[rya]+'" BORDER=0><p>')
  20.   }
  21.   random_imglink()
  22.   // -->
  23. </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
  • Posts: 1853

Post 3+ Months Ago

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
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

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


Perhaps you should actually test somthing before "noticing a problem" with it :wink:
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

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"
  13.   var ry=Math.floor(Math.random()*myimages.length)
  14.   if(ry<1) ry++;
  15.   var ry2=Math.floor(Math.random()*myimages.length)
  16.   if(ry2<1) ry2++;
  17.   if(ry == ry2){ry>1 ? ry2-- : ry2++;}
  18.   document.write(ry + "|" + ry2 + "<br>");
  19.  
  20.   return ry;
  21.   }
  22.  var indexsum = new Array()
  23.  for(var i = 1; i < 9; i++)
  24.  {
  25.   indexsum[i] = 0;
  26.  }
  27.   
  28.  for(var i=0; i<10000; i++)
  29.  {
  30.   indexsum[random_imglink()]++;
  31.   
  32.  }
  33.  
  34.  for(var i = 1; i < 9; i++)
  35.  {
  36.   document.write("Index " + i + ": " + indexsum[i] + "<br>");
  37.  }
  38.   //-->
  39. </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
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

There is another lesson to be learned from this,
"Never doubt a math major" :lol:
  • DY123
  • Born
  • Born
  • DY123
  • Posts: 1

Post 3+ Months Ago

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

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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.