Displaying multiple images in html from folder

Question

Hi I'm new to html and I was just making something for fun as a practice. I'm trying to display multiple images in html, and I wasn't sure how. For example,

  <img src="/images/1/1.jpg" class="center">
  <img src="/images/1/2.jpg" class="center">
  <img src="/images/1/3.jpg" class="center">
  <img src="/images/1/4.jpg" class="center">

I have this right now, but I don't want to write this every time. I was wondering how I would do it. Could I use JavaScript or php or anything to put all images in the folder at once?

if name in series, then you can use loop.

Devsi Odedra
– Devsi Odedra

2019-12-10 04:27:28 +00:00
Commented Dec 10, 2019 at 4:27 — Devsi Odedra
– Devsi Odedra, Commented Dec 10, 2019 at 4:27
So you want to Create FileManager?

PriyankMotivaras
– PriyankMotivaras

2019-12-10 05:19:15 +00:00
Commented Dec 10, 2019 at 5:19 — PriyankMotivaras
– PriyankMotivaras, Commented Dec 10, 2019 at 5:19

Mister Jojo · Accepted Answer · 2019-12-10 04:59:12Z

1

simple code on PHP:

<?php
  $refFolder = "/images/1/";
  function folderList($Path) {
    return  array_slice(scandir($Path,SCANDIR_SORT_ASCENDING), 0); 
  }
  foreach(folderList($refFolder) as $file) { 
    $Z_info = pathinfo($file, PATHINFO_FILENAME);
    $Z_type = pathinfo($file, PATHINFO_EXTENSION);
    if ($Z_type == 'jpg') { 
?>
    <img class="center" 
      src="<? echo $refFolder.$file; ?>" 
      alt="<? echo $Z_info; ?>" 
    />
<?php } } ?>

edited Dec 10, 2019 at 4:59

answered Dec 10, 2019 at 4:37

Mister Jojo

22.9k6 gold badges28 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ajay Ullal · Accepted Answer · 2019-12-10 04:37:09Z

0

You need to create a rest endpoint which returns you the list of all the images in your folder and then you could loop through the array and add your images to the DOM dynamically.

Ex:

const folder = '/folder';
const arr = ['img1.jpg', 'img2.jpg'];

arr.forEach(image => {
   const imgCntr = document.getElementById('imgCntr'); // Div which contains the iamges
   const img = document.createElement("IMG");
   img.src = `${folder}/${image}`;
   imgCntr.appendChild(img)
});

answered Dec 10, 2019 at 4:37

Ajay Ullal

3782 silver badges10 bronze badges

Collectives™ on Stack Overflow

Displaying multiple images in html from folder

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related