Javascript Randomize Images ( without showing the same image )

Question

I have a gallery on my portfolio website which shows all of my pictures in a masonry type grid. Now I would like to randomize those pictures without showing them more then once ! so I don't have the same images in the gallery.

// place your images in this array
var random_images_array = [
  'Laundry_Shoot (1).JPG',
  'Laundry_Shoot (5).JPG',
  'Laundry_Shoot (10).JPG',
  'Laundry_Shoot (28).JPG'
];

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();
}

<!-- END FILTER BUTTONS -->
<div class="gallery">
  <div class="img filterDiv film portret">
    <script type="text/javascript">
      getRandomImage(random_images_array, 'images/portfolio/')
    </script>
  </div>
  <div class="img filterDiv film portret">
    <script type="text/javascript">
      getRandomImage(random_images_array, 'images/portfolio/')
    </script>
  </div>
  <div class="img filterDiv film portret">
    <script type="text/javascript">
      getRandomImage(random_images_array, 'images/portfolio/')
    </script>
  </div>
</div>
</div>

Simply [shuffle the array](https://stackoverflow.com/a/12646864/9867451) once and use the elements from left to right, use a global index variable to keep track of the last element used. — ibrahim mahrir, Nov 14 '20 at 13:52
@ibrahimmahrir _"use a global index..."_ - Why? Just `.shift()` (or `.pop()`) the images from the array. — Andreas, Nov 14 '20 at 13:56
@Andreas OP may want to use the images later, and the index variable doesn't necessarily have to be global, it could be hidden in an IIFE for example. — ibrahim mahrir, Nov 14 '20 at 13:58
@dylan why are you using multiple script tags? Why not generate those `img.filterDiv.film.portret` and append them to the dom directly? — ibrahim mahrir, Nov 14 '20 at 14:02

score 0 · Answer 1 · answered Nov 14 '20 at 13:53

0

You could "shuffle" you array by using this function:

random_image_array.sort(() => Math.random() - 0.5);

answered Nov 14 '20 at 13:53

Hugh

366
1
12

score 0 · Answer 2 · answered Nov 15 '20 at 00:31

You could try using the Math.random() and Math.floor() functions as shown below.

// stores all img paths
const imgs = [
  // your image paths go here
]

function chooseRandomImg() {
  // picks a random index
  const i = Math.floor(Math.random() * (imgs.length));
  
  // gets the img element from the HTML file
  const imgEle = document.getElementById("img-id");

  // sets the source of the img element to a random path from the imgs array
  imgEle.src = imgs[i];
}

// when the page is loaded, this picks a random img
window.onload = function () {
  chooseRandomImg();
}

In your HTML file, create an <img/> element and this should work correctly if the ID in document.getElementById() matches the <img/> element ID.

<img id="img-id" width="50" height="50"/>

There is a tutorial with something similar to this but with text on freecodecamp.org.

Javascript Randomize Images ( without showing the same image )

2 Answers2