Random photo from folder - JavaScript

Question

I want to create a website that will randomly download any photo from the catalog, except that the script has only the location of the folder from which the photos are to be displayed. Without file name. For example, I have the "images" directory and I want the script to display the image randomly (DO NOT ENTER THE FILE NAME).

This is my script:

const btnPhoto = document.createElement('button');
btnPhoto.innerText = 'change image';
const fieldPhoto = document.createElement('div');
document.body.appendChild(btnPhoto);
document.body.appendChild(fieldPhoto);

function getRandomArbitrary(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

btnPhoto.addEventListener('click', () => {
    fieldPhoto.innerHTML = `<img src="${'*.jpg, *.png, *.bmp'[getRandomArbitrary(0, 1)]}">`;
});

Unless you can get a listing of the directory or at least know the pattern of the names, you can't just *guess* what a valid image name would be. — VLAZ, Nov 25 '19 at 17:17
You'll need server-side code to be able to give the client some information about what files are available, or the server-side to decide which random image to show. — TKoL, Nov 25 '19 at 17:18
Yes. I do not know how to do this. (random photos from the catalog) (these photos have any names) In the script I want to specify only the directory where the images are located. — Taki Tam Slu, Nov 25 '19 at 17:28
Something like this script at the bottom, but in JavaScript. '; ?> https://prnt.sc/q1wcq4 — Taki Tam Slu, Nov 25 '19 at 17:38
This is a *server-side* script - the server already has access to all the image files. JS code in the browser doesn't. [Read more](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) — VLAZ, Nov 25 '19 at 17:52
The question is, can you use php or nodejs? You'd need that to at least get a list of files and then you can use plain javascript to display the image. — Juan V, Nov 25 '19 at 18:00
**Vlaz** You don't know what I mean. I need help with the script! It is intended for random any photo from the catalog. — Taki Tam Slu, Nov 25 '19 at 18:00
Taki, we understand what you want. But the problem is you cannot achieve this with pure javascript unless the images have a pattern like image1.jpg, image2.jpg, etc. If all images have random names then **YOU NEED** to get a list of the images somehow and you cannot do this without php or any other kind of server-side language, even javascript with with nodejs would work. — Juan V, Nov 25 '19 at 18:21
**Juan V**, I understand that this is not possible in javascript. Can you give me an example in node.js? — Taki Tam Slu, Nov 25 '19 at 18:25
I could give you a working example with php, if that doesn't work for you, create another question asking how to do this with node.js and hopefully someone will help you with that. — Juan V, Nov 25 '19 at 18:35
**Juan V**, you can give using PHP? I will be very grateful. — Taki Tam Slu, Nov 25 '19 at 18:38

Juan V · Accepted Answer · 2019-11-25T19:19:21.293

As was explained in the comments for the question, this can't be done with vanilla javascript alone as you need a list of the images or some pattern for the images names ahead of time.

If you can use php, then this would work:

<body></body>

<script>
// your current code
const btnPhoto = document.createElement('button');
btnPhoto.innerText = 'change image';
const fieldPhoto = document.createElement('div');
document.body.appendChild(btnPhoto);
document.body.appendChild(fieldPhoto);

// This is what you need server side scripting
let images = 
<?php
    $images = glob("images/*.{jpg,jpeg,png}", GLOB_BRACE);
    echo json_encode($images);
?>;

// gets random image from array
let length = images.length;
function getRandomImage() {
    let random = Math.floor( Math.random() * length );
    console.log(random); // this is to see what number you get, safe to delete
    return images[random];
}

btnPhoto.addEventListener('click', () => {
    fieldPhoto.innerHTML = '<img src="' + getRandomImage() + '">';
});
</script>

In this example, php is only used to generate an array from a list of images from a folder called "images".

As a sidenote, the function json_encode used in php requires php equal or higher than 5.2.0.

// EDIT

If you simply need a random image on load of the page and can avoid creating the image on the fly, you could do:

<?php
    $images = glob("images/*.{jpg,jpeg,png}", GLOB_BRACE);
    $randomIndex = rand(0,sizeof($images)-1);
    $randomImage = $images[$randomIndex];
?>
<img src="<?php echo $randomImage;?>">

Please note that mixing PHP and JS is not ideal. Obtaining a listing server side is a good idea but a different way of interfacing (like data attributes) is recommended. — Sven van de Scheur, Nov 25 '19 at 18:51
Hi Taki, did you test the whole script? You need at the very least the body tags so the button has somewhere to be created otherwise you get that error. If you did and it still doesn't work, add the whole document structure. — Juan V, Nov 25 '19 at 18:56
Does not matter. I did it myself. Thanks again for your help! — Taki Tam Slu, Nov 25 '19 at 19:08
Not a problem. As you probably guessed, simply calling what's inside the addEventListener does it, but I'm not sure why you're appending these elements since it'd be better to directly create them and set the src instead in which case you could also pass the image from php instead of having to mix php and js like this. I'm going to add a small piece of code of doing it with just php, you can figure out if you can use it or not. Good luck! — Juan V, Nov 25 '19 at 19:18

Random photo from folder - JavaScript

1 Answers1