Photo gallery in html

Replit Help
1

Question:
I’ve got 100 pictures to make a photo gallery in html and CSS.
Do I have to make a tag for each picture of the list?
Is any way to put all the picture of a folder on a grid?

Repl link/Link to where the bug appears:

Screenshots, links, or other helpful context:

code snippet
2

I mean, yeah, you kind of have to. Unless, you could write some JavaScript that could iterate over all of those images and create tags for them automatically.

2 Likes
3

O, thank you Boston2029.
At least is a way to do it.
Anywhere to learn how to do it?
I mean, git, javascript tutorial… Anything to see where to start

1 Like
4

Just put images in a folder, and name them with numbers, e.g. 0.png or 5.jpg, in order. And then you could do something like this in the JavaScript:

const numberOfImages = 100 // How many images are in the folder
for (let i=0;i<numberofImages;i++) {
    let newImageElement = document.createElement("img")
    img.src="/images/" + i + ".png"
    document.getElementById("myContainer").appendChild(newImageElement)
}

And then do the CSS in another file as normal. Change numberOfImages to the number of images in your images folder, and make sure that folder is named images with numbered pictures inside of it.

5

Ok…
Let’s see what can I do and understand… :sweat_smile::sweat_smile:
Thanks

1 Like