Generating random images with no repeats

Cuthlucorn · 01-22-2009, 07:17 PM

I want a certain amount of image spots to show a certain set of images (specifically 8) in a random order every time the page is refreshed. I do not want the images to be repeated, however. The solution I came up with was to create an array and generate a number one to eight and then compare that number to the numbers previously in the array, and if it matched one that was previously generated, to generate a new number and then compare it. This continues until i have an array of the numbers 1-8 in a random order.

Code:

	var imgs=new Array(8);
	for(i in imgs)
	{ 
		function generate()
		{
			return Math.floor(1+Math.random()*8);
		}

		var rand=generate();

		function compare(i)
		{
			for(var n=i-1; n>=0; n--)
			{ 
				if (n<0)
				{
					imgs[i]=rand;
				}
				
				else
				{
					if (rand==n)
					{
						rand=generate();
						compare(i);
					}
				}
			}
		}
	}

This does not strike me as the most efficient way to go about this. If someone has a better solution, that would help a great deal.

Philip M · 01-22-2009, 08:00 PM

Try this:-

Code:

<script type = "text/javascript">

var imgArray = ['img1.gif','img2.gif','img3.gif','img4.gif','img5.gif', 'img6.gif', 'img7.gif', 'img8.gif'];
function randOrd(){return (Math.round(Math.random())-0.5); }
imgArray.sort(randOrd);
var pic1 = imgArray[0]; // first random image
var pic2 = imgArray[1]; // second random image
var pic3 = imgArray[2]; // third random image
var pic4 = imgArray[3]; // fourth random image
var pic5 = imgArray[4]; // fifth random image
var pic6 = imgArray[5]; // sixth random image
var pic7 = imgArray[6]; // seventh random image
var pic8 = imgArray[7]; // eighth random image

alert (imgArray);  // delete after testing

</script>

Quizmaster: In mythology, what term for a potion that increases sexual desire is derived from the name of the Greek goddess of love?
Contestant: Viagra

jmrker · 01-22-2009, 08:15 PM

Gees, that PhillipM always gets the easy ones!

Philip M · 01-22-2009, 09:41 PM

Quote:

Originally Posted by jmrker

Gees, that PhillipM always gets the easy ones!

Well, those are the only ones I can answer!

katai_kennels · 01-22-2009, 10:24 PM

not sure if it's cool to jump on a post and ask a question (on a qestion post)
but it has something to do with the topic...

maybe i should just start a new thread?? let me know...

if so delete this and i'll start a new thread...

can the code above (posted by Phillip M) be added to this code:

Code:

<script type="text/javascript">
var imgs1 = new Array("http://i41.photobucket.com/albums/e299/kataikennels123456789/xllogo.jpg","http://i41.photobucket.com/albums/e299/kataikennels123456789/MAJORLEAGE.jpg","http://i41.photobucket.com/albums/e299/kataikennels123456789/GGPITS.jpg");
var lnks1 = new Array("http://www.xplicitlook.com/","http://www.majorleaguepitbulls.com/","http://www.gargoylepits.com/");
var alt1 = new Array();
var currentAd1 = 0;
var imgCt1 = 3;
function cycle1() {
  if (currentAd1 == imgCt1) {
    currentAd1 = 0;
  }
var banner1 = document.getElementById('adBanner1');
var link1 = document.getElementById('adLink1');
  banner1.src=imgs1[currentAd1]
  banner1.alt=alt1[currentAd1]
  document.getElementById('adLink1').setAttribute('href',lnks1[currentAd1]);
  document.getElementById('adLink1').setAttribute('target','_blank');
  currentAd1++;
}
  window.setInterval("cycle1()",1000);
</script>
<a href=""http://www.xplicitlook.com/"" id="adLink1" target="_top">
<img src="http://i41.photobucket.com/albums/e299/kataikennels123456789/xllogo.jpg" id="adBanner1" border="0" width="127" height="127"></a>

and if so, where?

i'm trying to get the banners to run random in stead of 1,2,3...
so every time you refresh it doesnt always start with banner number 1.

but they will need to repeat...

jmrker · 01-23-2009, 02:58 AM

For 'katal_kennels':

Code:

<html>
<head>
<title>Random Images</title>
<script type="text/javascript">

function randOrd(){return (Math.round(Math.random())-0.5); }

var img_lnks = [
  ["http://i41.photobucket.com/albums/e299/kataikennels123456789/xllogo.jpg","http://www.xplicitlook.com/"],
  ["http://i41.photobucket.com/albums/e299/kataikennels123456789/MAJORLEAGE.jpg","http://www.majorleaguepitbulls.com/"],
  ["http://i41.photobucket.com/albums/e299/kataikennels123456789/GGPITS.jpg","http://www.gargoylepits.com/"]  // note: no comma at end
  ];
img_lnks.sort(randOrd);
var currentAd1 = 0;

function cycle1() {
  currentAd1 = (currentAd1 % img_lnks.length);
  var banner1 = document.getElementById('adBanner1');
  var link1 = document.getElementById('adLink1');
  banner1.src=img_lnks[currentAd1][0];
  banner1.alt=img_lnks[currentAd1][0];
  document.getElementById('adLink1').setAttribute('href',img_lnks[currentAd1][1]);
  document.getElementById('adLink1').setAttribute('target','_blank');
  currentAd1++;
}
</script>
</head>
<body onload='window.setInterval("cycle1()",1000)'>
<a href="" id="adLink1" target="_top">
<img src="" alt="" id="adBanner1" border="0" width="127" height="127">
</a>
<script type="text/javascript">
  document.getElementById('adBanner1').src = img_lnks[0][0];
  document.getElementById('adBanner1').alt = img_lnks[0][0];
  document.getElementById('adLink1').src = img_lnks[0][1];
</script>
</body>
</html>

Note that there will be very little randomization with only 3 images and links.
You will see much more variability with the addition of more images and links into the img_lnks array

Cuthlucorn · 01-23-2009, 04:03 AM

Philip M, that was really, amazingly helpful, thanks. I did not know of the sort function and this will save me much time in the future (and now, of course).

katai_kennels · 01-24-2009, 06:35 PM

Quote:

Originally Posted by jmrker

For 'katal_kennels':

Code:

<html>
<head>
<title>Random Images</title>
<script type="text/javascript">

function randOrd(){return (Math.round(Math.random())-0.5); }

var img_lnks = [
  ["http://i41.photobucket.com/albums/e299/kataikennels123456789/xllogo.jpg","http://www.xplicitlook.com/"],
  ["http://i41.photobucket.com/albums/e299/kataikennels123456789/MAJORLEAGE.jpg","http://www.majorleaguepitbulls.com/"],
  ["http://i41.photobucket.com/albums/e299/kataikennels123456789/GGPITS.jpg","http://www.gargoylepits.com/"]  // note: no comma at end
  ];
img_lnks.sort(randOrd);
var currentAd1 = 0;

function cycle1() {
  currentAd1 = (currentAd1 % img_lnks.length);
  var banner1 = document.getElementById('adBanner1');
  var link1 = document.getElementById('adLink1');
  banner1.src=img_lnks[currentAd1][0];
  banner1.alt=img_lnks[currentAd1][0];
  document.getElementById('adLink1').setAttribute('href',img_lnks[currentAd1][1]);
  document.getElementById('adLink1').setAttribute('target','_blank');
  currentAd1++;
}
</script>
</head>
<body onload='window.setInterval("cycle1()",1000)'>
<a href="" id="adLink1" target="_top">
<img src="" alt="" id="adBanner1" border="0" width="127" height="127">
</a>
<script type="text/javascript">
  document.getElementById('adBanner1').src = img_lnks[0][0];
  document.getElementById('adBanner1').alt = img_lnks[0][0];
  document.getElementById('adLink1').src = img_lnks[0][1];
</script>
</body>
</html>

Note that there will be very little randomization with only 3 images and links.
You will see much more variability with the addition of more images and links into the img_lnks array

this worked great, the only issiue i'm having now is that it's doesn't loop.. if i stay on one page long enough it runs threw all three images and stays on the last image. the cool part is when i hit refresh or change pages it is a random image at the start... but then stops on the last image.

is there a way to loop it?

but i am A LOT closer to where i need to be now, thank you for your time and help.

jmrker · 01-24-2009, 08:56 PM

Quote:

Originally Posted by katai_kennels

this worked great, the only issiue i'm having now is that it's doesn't loop.. if i stay on one page long enough it runs threw all three images and stays on the last image. the cool part is when i hit refresh or change pages it is a random image at the start... but then stops on the last image.

is there a way to loop it?

but i am A LOT closer to where i need to be now, thank you for your time and help.

I have not been able to replicate the problem you are having.
There is nothing I can see that would stop the rotation after the last image.
Are you using a particular browser that is giving you fits?

One other thought maybe the connection speed. Try increasing the time from 1000 to 5000 or greater.
Maybe the images cannot load fast enough before the next image is cycled?

Philip M · 01-24-2009, 09:05 PM

Quote:

Originally Posted by jmrker

I have not been able to replicate the problem you are having.
There is nothing I can see that would stop the rotation after the last image.
Are you using a particular browser that is giving you fits?

One other thought maybe the connection speed. Try increasing the time from 1000 to 5000 or greater.
Maybe the images cannot load fast enough before the next image is cycled?

Works fine for me in IE6, although it might be an idea to delay displaying the images until they have all loaded, as like you I think that trouble is that the images cannot load fast enough before the next image is cycled.

katai_kennels · 01-24-2009, 09:50 PM

I was on my way back with an update...

it's kinda weird... the code is being used on a VB forum just like this one. On the left side I have a banner for sponsors.

when i go to the site, it works fine... keeps on running threw each banner...

as i go threw the different forums and threads it will stop at some point and stay on the same banner unless i hit refresh. then it runs fine again.

i'm not sure if i'm making sense...

main page > general topics > topic

main page - works fine,
general topics - start with random banner and works fine
topic - starts with random banner and stops on last image and stays on last image until I hit refresh.

not sure why it would do that? Probably has nothing to do with the code. thanks for the time and help guys.

ps. I'm using IE and have it set at 6000

CrazeUK · 05-25-2011, 02:33 PM

Hi Guys. I am more or less new to JS or any sort of coding.

I have used this script and get a pop up message with image names in it.

Now with the risk of sounding like i dont know anything at all.. which i dont.
How would i use this in a webpage?
Also can someone explain the inner workings?

Thanks in advance

Quote:

Originally Posted by Philip M

Try this:-

Code:

<script type = "text/javascript">

var imgArray = ['images/img1.gif','images/img2.gif','images/img3.gif','img4.gif','img5.gif', 'img6.gif', 'img7.gif', 'img8.gif'];
function randOrd(){return (Math.round(Math.random())-0.5); }
imgArray.sort(randOrd);
var pic1 = imgArray[0]; // first random image
var pic2 = imgArray[1]; // second random image
var pic3 = imgArray[2]; // third random image
var pic4 = imgArray[3]; // fourth random image
var pic5 = imgArray[4]; // fifth random image
var pic6 = imgArray[5]; // sixth random image
var pic7 = imgArray[6]; // seventh random image
var pic8 = imgArray[7]; // eighth random image

alert (imgArray);  // delete after testing

</script>

Quizmaster: In mythology, what term for a potion that increases sexual desire is derived from the name of the Greek goddess of love?
Contestant: Viagra