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 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Generating random images with no repeats

    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.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    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

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Cool

    Gees, that PhillipM always gets the easy ones!

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by jmrker View Post
    Gees, that PhillipM always gets the easy ones!
    Well, those are the only ones I can answer!

  • #5
    New Coder
    Join Date
    Jan 2009
    Location
    vegas baby!
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts

    not sure if this is cool...

    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...

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb Here you go ...

    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

  • Users who have thanked jmrker for this post:

    katai_kennels (01-24-2009)

  • #7
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks

    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).

  • #8
    New Coder
    Join Date
    Jan 2009
    Location
    vegas baby!
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    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.

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Question

    Quote Originally Posted by katai_kennels View Post
    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?
    Last edited by jmrker; 01-24-2009 at 09:02 PM.

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by jmrker View Post
    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.

  • #11
    New Coder
    Join Date
    Jan 2009
    Location
    vegas baby!
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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

  • #12
    New to the CF scene
    Join Date
    May 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 View Post
    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


  •  

    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
    •