0

I created a HTML page.

Now, I try to display all the pictures that are in a specific folder (/folder1) in this HTML page (Note: I don't know the names of these images).

I try to create a loop, which read all this images, and display it in this HTML.

There is an easy way to do that?

Or Smith
  • 3,556
  • 13
  • 42
  • 69
  • 1
    If you don't know the names, then you'll need to use a `server-side` language `asp.net` or `PHP` for example, to scan the directory and add all the images to an array that you can iterate through. `HTML` is just `markup`. – Nick R Nov 26 '13 at 13:16
  • An alternative would be to look at the settings on the actual website to allow users to browse directories. In IIS the setting is called 'Directory Browsing'. It's probably similar in Apache or Tomcat. – Daniel Hollinrake Nov 26 '13 at 13:20

3 Answers3

3

You are looking for something which HTML cannot do. You are going to need some sort of backend language, whether that be Rails, PHP, Python, or something else doesn't really matter.

HTML is and always will be only a Markup Language.

Here is a similar post which has code that might help you:

How To Display All Images in Folder

Community
  • 1
  • 1
Dan Grahn
  • 9,044
  • 4
  • 37
  • 74
1

With php you can use function scandir() to retrieve all the files in a directory, and save them as an array.

Then iterate over that array and display any image with something like:

echo '<img src="path/to/folder1/'$files_array[i]'">

where $files_array contains the names of every image file in that directory.

Guillem Cucurull
  • 1,681
  • 1
  • 22
  • 30
0

if your images are stored in a server you can read the directory and get the image name them send to the font end.

if you are work in a local file system such as

/dir/index.html
/dir/images/
/dir/images/xxx.png
/dir/images/aaa.png
/dir/images/other  image.png

you can rename all images in batch to 1.png 2.png 3.png ...and so on then use javascript in html to

generate the image

var body = document.getElementsByTagName("body")[0];
for (var i = 0; i < 100; ++i) {
  var img = document.createElement("img");
  img.src = "images/" + i + ".png";
  body.appendChild(img);
}
qiu-deqing
  • 1,323
  • 7
  • 13