-1

Ok so i've used javascript to randomly display images in my grid using an array the problem i have is that since its grabbing a random image sometimes it grabs the same image twice. i will post my code below but i was just looking for a solution so that once it displays an image it won't display that image again

this is my javascript:

    var random_images_array = ['atoodbranding2.png', 'thebegining.jpg', 'ella_playin_in_the_yard.png', 'project-1.png','Frontier-attachments-for-sale.png','ipfwadd-01.jpg','invites.png'];

function getRandomImage(imgAr, path) {
    path = path || 'images/portfolio/'; // default path here
    var num = Math.floor( Math.random() * imgAr.length );
    var img = imgAr[ num ];
    var imgStr = '<img src="' + path + img + '" alt = "">';
    document.write(imgStr); document.close();
}

this is my html

<div class="container photo-container bg-3 text-center">


      <div class="photos">
      <a data-toggle="modal" id="1" href="#myModal"><script type="text/javascript">getRandomImage(random_images_array, 'images/portfolio/')</script></a>
      <a data-toggle="modal" id="2" href="#myModal"><script type="text/javascript">getRandomImage(random_images_array, 'images/portfolio/')</script></a>
      <a data-toggle="modal" id="3" href="#myModal"><script type="text/javascript">getRandomImage(random_images_array, 'images/portfolio/')</script></a>
      <a data-toggle="modal" id="4" href="#myModal"><script type="text/javascript">getRandomImage(random_images_array, 'images/portfolio/')</script></a>
      <a data-toggle="modal" id="5" href="#myModal"> <script type="text/javascript">getRandomImage(random_images_array, 'images/portfolio/')</script></a>
      <a data-toggle="modal" id="6" href="#myModal"> <script type="text/javascript">getRandomImage(random_images_array, 'images/portfolio/')</script></a>
      <a data-toggle="modal" id="7" href="#myModal"><script type="text/javascript">getRandomImage(random_images_array, 'images/portfolio/')</script></a>
</div>
</div>

I'm pretty new to javascript so sorry if this is a question thats been answered already or one that is a super easy fix

Austin Beale
  • 3
  • 1
  • Keep an array of the indices you've already displayed. If the `random` function returns something that is already in that array, get another random number until it isn't in the array. – dmeglio Oct 03 '16 at 17:22
  • generate a random array of non repeating numbers then cycle through it, see this http://stackoverflow.com/questions/18806210/generating-non-repeating-random-numbers-in-js – bryan60 Oct 03 '16 at 17:24
  • Or you can initally [shuffle](http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array) the array, then just loop through it – j08691 Oct 03 '16 at 17:25

1 Answers1

1

You could just splice the selected image out of your array, then it won't be available on the next iteration:

function getRandomImage(imgAr, path) {
    path = path || 'images/portfolio/'; // default path here
    var num = Math.floor( Math.random() * imgAr.length );
    var img = imgAr[ num ];
    // remove the selected image
    imgAr.splice(num, 1);
    var imgStr = '<img src="' + path + img + '" alt = "">';
    document.write(imgStr); document.close();
}
Rob M.
  • 35,491
  • 6
  • 51
  • 50