How Can I Display Images From A Folder In Random Order With Javascript?

- 1 answer

What I want is simple, to have a new image display everytime I refresh the page, that is working right now, my problem is selecting those images, there's hundreds of them, both .png and .jpg. Typing out each image by name or even renaming them seems incredibly inneficient, how can I change my code so it gets all the images in the 'images' folder?

Code posted.

    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" target="_blank" rel="nofollow noreferrer" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <body> <!-- This piece of Javascript will randomly decide an image for your homepage. -->

      var pictures = ['images/Aging.png', 'images/Teddy.png', 'images/Socrates.png',];
      var picture = pictures[Math.floor(Math.random() * pictures.length)];
      document.write('<img src="' + picture + '"/>');



Say you have 100 images. The simplest action is to rename them with an id (say 1.jpg to 100.jpg), and call an image randomly with its name.

    function getRandomInt(max) { // number between 1 & max
      return ( Math.floor(Math.random() * Math.floor(max)) )+1;

    let img = document.getElementById("yourImg");
    img.src = getRandomInt(100) +".jpg";

Another problem is the location of your images. The other computers can't navigate through your folders from another place on the world with internet, so you will need to host them where you host your website.

But if the website is created to be browsed locally, the problem will not arise.

Edit: You can verify if your file exists in js (with ajax call), but I think the easiest thing to do is to convert all your png files into jpg (or vice-versa). There are some cool utilities that can convert files with ease.

You can use mv and an index to rename all your *.jpg files.

Ex with .txt files:

for name in *.txt; do
        mv $name $i.txt

Console view:

$> mkdir a
$> cd a
$> touch a.txt
$> touch b.txt
$> touch zerg.txt
$> touch heyy.txt
$> ls
a.txt  b.txt  heyy.txt  zrg.txt
$> nano
$> chmod +x
$> ./
$> ls
1.txt  2.txt  3.txt  4.txt


You have to create your url path with your subdirectory, your random name, and your extension.

Here is a bit of code to get you started :)

<img id="test" />
<p id="text"></p>

    // config, modify your values here :)
    let directory = "img/";
	let nb_of_files = 100;

	function getRandomInt(max) { // number between 1 & max
		return ( Math.floor(Math.random() * Math.floor(max)) )+1;

	let random_int = getRandomInt(100);
	let img = document.getElementById('test');
	img.src = directory + random_int +".jpg";

	document.getElementById('text').innerHTML = "Image choosen is "+ img.src +"";