Skip to content

Commit d0f740e

Browse files
ms-sollyms-solly
committed
img gallery features
1 parent 2f3759b commit d0f740e

18 files changed

+139
-2
lines changed

‎.img

-1
This file was deleted.

‎.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"livePreview.defaultPreviewPath": "/index.html"
3+
}

‎add_image

16.7 KB
Binary file not shown.

‎add_image.c

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
#include <stdio.h>
2+
#include <stdlib.h>
3+
#include <string.h>
4+
5+
#define MAX_FILENAME_LENGTH 100
6+
#define MAX_ALT_LENGTH 100
7+
#define MAX_IMAGES 100
8+
9+
// Structure to represent an image
10+
typedef struct {
11+
char filename[MAX_FILENAME_LENGTH];
12+
char alt[MAX_ALT_LENGTH];
13+
} Image;
14+
15+
int main() {
16+
Image images[MAX_IMAGES];
17+
int numImages = 0;
18+
19+
FILE *file;
20+
21+
// Read existing image data from imgs.json
22+
file = fopen("imgs.json", "r");
23+
if (file) {
24+
char line[256];
25+
while (fgets(line, sizeof(line), file)) {
26+
sscanf(line, "{\"filename\": \"%[^\"]\", \"alt\": \"%[^\"]\"}",
27+
images[numImages].filename, images[numImages].alt);
28+
numImages++;
29+
}
30+
fclose(file);
31+
}
32+
33+
// Add a new image
34+
char newFilename[MAX_FILENAME_LENGTH];
35+
char newAlt[MAX_ALT_LENGTH];
36+
37+
printf("Enter the filename of the new image: ");
38+
scanf("%s", newFilename);
39+
printf("Enter the alt text for the new image: ");
40+
scanf("%s", newAlt);
41+
42+
strncpy(images[numImages].filename, newFilename, MAX_FILENAME_LENGTH);
43+
strncpy(images[numImages].alt, newAlt, MAX_ALT_LENGTH);
44+
numImages++;
45+
46+
// Write updated image data to imgs.json
47+
file = fopen("imgs.json", "w");
48+
if (file) {
49+
for (int i = 0; i < numImages; i++) {
50+
fprintf(file, "{\"filename\": \"%s\", \"alt\": \"%s\"}\n",
51+
images[i].filename, images[i].alt);
52+
}
53+
fclose(file);
54+
} else {
55+
printf("Error: Could not open file for writing.\n");
56+
return 1;
57+
}
58+
59+
printf("Image added successfully!\n");
60+
61+
return 0;
62+
}

‎imgs.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
[
2+
{"filename": "./imgs/img.jpg", "alt": "Image 1"},
3+
{"filename": "./imgs/img2.jpg", "alt": "Image 3"},
4+
{"filename": "./imgs/img3.jpg", "alt": "Image 1"},
5+
{"filename": "./imgs/img4.jpg", "alt": "Image 2"},
6+
{"filename": "./imgs/img5.jpg", "alt": "Image 3"},
7+
{"filename": "./imgs/img6.jpg", "alt": "Image 1"},
8+
{"filename": "./imgs/img7.jpg", "alt": "Image 1"},
9+
{"filename": "./imgs/img8.jpeg", "alt": "Image 1"}
10+
11+
]
12+

‎7eae7e6aa398c6a3bceaae10b2012192.jpg renamed to ‎imgs/img.jpg

File renamed without changes.

‎14f91b8252a06e16061abaf4547f84d0.jpg renamed to ‎imgs/img2.jpg

File renamed without changes.

‎26beb09153b8df233d82e66bef3edfbb.jpg renamed to ‎imgs/img3.jpg

File renamed without changes.

‎e5099f46458a41cf953040de4938210e.jpg renamed to ‎imgs/img4.jpg

File renamed without changes.

‎impressionism-painting-painting-art-child-wallpaper-preview.jpg renamed to ‎imgs/img5.jpg

File renamed without changes.

‎wp7925425.jpg renamed to ‎imgs/img6.jpg

File renamed without changes.

‎thumb-350-913191.jpg renamed to ‎imgs/img7.jpg

File renamed without changes.

‎pexels-photo-1646753.jpeg renamed to ‎imgs/img8.jpeg

File renamed without changes.

‎index.html

+17
Original file line numberDiff line numberDiff line change
@@ -1 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Dynamic Image Gallery</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="header"><h1>HEllo,<br/>
11+
Welcome to the images Gallery</h1></div>
12+
<div class="gallery" id="imageGallery">
13+
<!-- Images will be dynamically added here -->
14+
</div>
115

16+
<script src="script.js"></script>
17+
</body>
18+
</html>

‎photo-1667477667276-70f02fd964f1

-126 KB
Binary file not shown.

‎script.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
document.addEventListener('DOMContentLoaded', function() {
2+
const gallery = document.getElementById('imageGallery');
3+
4+
// Function to fetch images from the server
5+
function fetchImages() {
6+
fetch('imgs.json')
7+
.then(response => response.json())
8+
.then(images => {
9+
gallery.innerHTML = ''; // Clear previous images
10+
images.forEach(image => {
11+
const img = document.createElement('img');
12+
img.src = image.filename;
13+
img.alt = image.alt;
14+
gallery.appendChild(img);
15+
});
16+
})
17+
.catch(error => console.error('Error fetching images:', error));
18+
}
19+
20+
fetchImages(); // Fetch images when the page loads
21+
22+
// Poll for new images every 5 seconds
23+
setInterval(fetchImages, 5000);
24+
});
25+

‎style.css

+12-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,12 @@
1-
1+
.gallery {
2+
display: flex;
3+
flex-wrap: wrap;
4+
justify-content: space-between; /* Distribute items evenly along the main axis */
5+
}
6+
7+
.gallery img {
8+
max-width: calc(33.33% - 10px); /* Set maximum width for each image */
9+
max-height: 200px; /* Set maximum height for each image */
10+
margin-bottom: 10px; /* Add space between rows */
11+
}
12+

‎watcher.sh

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
#!/bin/bash
2+
3+
while inotifywait -e create,modify,move ./imgs; do
4+
gcc add_image.c -o add_image
5+
./add_image
6+
echo "Images updated. Reloading webpage..."
7+
curl -s -X POST http://localhost:8080 > /dev/null
8+
done

0 commit comments

Comments
 (0)