1

I am loading pictures from a photos folder manually like this :

<div class="container">

 <div class="item">
    <a href="#">
        <img type=file src="photos/01.jpg" />
    </a>
 </div>

 <div class="item">
    <a href="#">
        <img type=file src="photos/04.jpg" />
    </a>
 </div>

How can i load all the pictures (jpg and png) automatically from this folder alphabeticaly ?

The pictures have random names, and are sometimes jpg or png.

The idea is to be able to load all the pictures from the folder, without specifying the number of pictures in the folder. for exemple if there is 2 pictures, it loads 2 pictures. 3 pictures in the folder, it load 3 pictures...

exemple of picture names to display: rrededd01.jpg, treddeeda.png, zsa99889.jpg

Thank you for your help.

Gost BJ
  • 29
  • 8

2 Answers2

3

Supposing that you are not dealing with a server-side language, the common approach would be using Javascript to dinamically append the images. You could try this code, replacing the part you provided; it will generate 4 images. You can just change the number 4 if you have more images.

<div class="container"></div>

<script>

// Change this if you have more or less than 4 images!
const quantityOfImages = 4;

// Declares an empty string which will save all the images HTML
let images = '';

// Loops to generate the HTML for each image
for(let i = 1; i <= quantityOfImages; i++) {
  // Assigns number; this is to get the number correctly formatted from 01 to 99
  const number = ('0'+i).substr(-2);

  images += `
    <div class="item">
        <a href="#">
            <img type=file src="photos/${number}.jpg" />
        </a>
    </div>
  `;
}

// Now .container has all the images!
document.querySelector('.container').innerHTML = images;

</script>
Juan Elfers
  • 770
  • 7
  • 13
  • Hello, thank you very much, this is exactly the spirit, but the idea is to load images with random names, and to open it without specifying the number of image in the folder. I edit my question, because it was maybe not clear. – Gost BJ Sep 24 '18 at 07:52
  • For security reasons, you can't read the filesystem with Javascript from the browser, and if you are not running a server (online or local) you will not able to do that. Only server-side languages can read a folder content to provide the files names. Other solution would be to manually store the file names in an array* and loop over it with JS, but obviously any change in the images will have to be updated in the array. *var images = ['rrededd01.jpg', 'treddeeda.png', 'zsa99889.jpg']; – Juan Elfers Sep 24 '18 at 12:47
  • do you mean i should do it in PHP for exemple ? – Gost BJ Sep 24 '18 at 12:54
  • Exactly. And then you can render that directly in your html (now .php)(not recommended, but to start it could be the easiest way) or you can then get the data with ajax. This should help to begin: https://stackoverflow.com/questions/6234138/how-to-get-the-file-name-under-a-folder – Juan Elfers Sep 24 '18 at 13:00
  • ok, then it can read the folder and then recreate a serie of div like the one i use ?you mean it is impossible to read "all the picture from this folder" with javascript ? – Gost BJ Sep 24 '18 at 13:09
  • It is simply impossible. You can either render the HTML with PHP or render the "plain" data with PHP (with json_encode for example) and then get it with Javascript (Ajax) and then with that data do almost the same as you already have. – Juan Elfers Sep 24 '18 at 13:21
  • Yeap. Just minor changes will be necessary in that JS code. But first you'll have to do the PHP part and then the Ajax. Go try that and you can come back with new questions of those topics. Good luck! – Juan Elfers Sep 24 '18 at 14:00
  • is it a good idea to use File API in Javascript ? like https://stackoverflow.com/questions/30838871/get-all-images-from-local-folder – Gost BJ Sep 25 '18 at 23:06
  • Don't think the File API mentioned in that question will help you. Simplest thing for you will be to render the IMG tags in PHP as I originally suggested :) – eddiewould Oct 05 '18 at 12:49
1

Assuming the HTML is being generated by a sever side language (PHP, Python, Ruby, C#, Java...) the usual approach would be to glob the directories containing the images, loop over the fs entries and generate an IMG tag for each.

eddiewould
  • 1,555
  • 16
  • 36