Fill a CSS grid with pictures

Question

Fill a CSS grid with pictures

I have a collection of 100 images in the same size that I would like to arrange within a CSS grid.

The folder contains:

seperate-0.png
seperate-1.png
seperate-2.png
seperate-3.png
and so on...

The CSS code below shows the grid structure:

html,
body,
.grid-container {
    height: 100%;
    margin: 0;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(7, 1fr);
    gap: 0px 0px;
    grid-template-areas: ". . . . . . ." 
                         ". . . . . . ."
                         ". . . . . . ."
                         ". . . . . . ."
                         ". . . . . . ."
                         ". . . . . . ."
                         ". . . . . . .";
}


/* For presentation only, no need to copy the code below */

.grid-container * {
    border: 1px solid red;
    position: relative;
}

.grid-container *:after {
    content: attr(class);
    position: absolute;
    top: 0;
    left: 0;
}

Below is the HTML structure:

<div class="grid-container">
  <div class="grid-container">img 1 here</div>
</div>

My question is, how can I dynamically populate this grid with the images from the folder? Would it be possible to generate divs based on the contents of the directory?

javascript image

Answer 1

Answer №1

HTML

Created a new class called grid-container-parent

<div class="grid-container grid-container-parent">
</div>

JavaScript

var imagePath="./image/seperate-";
var numberOfImage=100;

var parentDIV = document.getElementsByClassName("grid-container-parent")[0];

for(var i=0;i<numberOfImage;i++){
    var tempDIV= document.createElement('div');
    tempDIV.setAttribute('class','grid-container');
    var innerHTML= `<img src='`+(imagePath+i)+`.png'></img>`
    tempDIV.innerHTML=innerHTML;
    parentDIV.appendChild(tempDIV);
}

Answer 2

HTML

Created a new class called grid-container-parent

<div class="grid-container grid-container-parent">
</div>

JavaScript

var imagePath="./image/seperate-";
var numberOfImage=100;

var parentDIV = document.getElementsByClassName("grid-container-parent")[0];

for(var i=0;i<numberOfImage;i++){
    var tempDIV= document.createElement('div');
    tempDIV.setAttribute('class','grid-container');
    var innerHTML= `<img src='`+(imagePath+i)+`.png'></img>`
    tempDIV.innerHTML=innerHTML;
    parentDIV.appendChild(tempDIV);
}

Answer 3

Answer №2

To create a loop that generates and inserts img elements with the appropriate src, you can iterate from 1 to 100. Here is an example:

const container = document.querySelector('.image-container');
for (let i = 1; i <= 100; i++) {
  const img = document.createElement('img');
  img.src = `path-to-image/image-${i}.png`;
  container.append(img);
}

Make sure your HTML structure is similar to this:

<div class="image-container">
  <!-- Images will be inserted here -->
</div>

Answer 4

To create a loop that generates and inserts img elements with the appropriate src, you can iterate from 1 to 100. Here is an example:

const container = document.querySelector('.image-container');
for (let i = 1; i <= 100; i++) {
  const img = document.createElement('img');
  img.src = `path-to-image/image-${i}.png`;
  container.append(img);
}

Make sure your HTML structure is similar to this:

<div class="image-container">
  <!-- Images will be inserted here -->
</div>

Fill a CSS grid with pictures

Answer №1

Answer №2

Similar questions

Issue with remounting in Nextjs 13

Can CSS actually generate accurate inches?

When using `require('backbone')`, the returned object can vary depending on the file it is called in

Retrieving a particular value from an array received through Ajax in JavaScript

The function "onClick" within an external .js file is being referenced

Tips for utilizing Plunker or JSFiddle to execute Angular2 code

html5-jquery checkbox change event not firing

Challenges with Media Queries post Integration of MUI Library in React

Is there a way to use jQuery to toggle a child element when the parent is clicked?

Encountering issues with $.AJAX post in JavaScript, while successful in Advanced Rest Client

What is the reason for the failure of the require("perf_hooks") function?

Encountering incorrect JSON formatting even though the content is accurate

Having trouble with the JSFiddle dropdown button that is unresponsive to

MongoDB subfield pagination technique

The route param is throwing a "Cannot read property 'name' of undefined" error, indicating that the property

Leveraging and utilizing TypeScript npm packages

Converting a child.jsp file into a modal or overlay using JavaScript: A step-by-step guide

Resizable table example: Columns cannot be resized in fixed-data-table

Using AJAX in a WordPress template

Angular 2 encountering troublesome JSON response with invalid characters