Spaces:

imspidey
/

gallerytest

Running

App Files Files Community

imspidey commited on Sep 21, 2023

Commit

8429799

1 Parent(s): c42620b

Update index.html

Browse files

Files changed (1) hide show

index.html +40 -27

index.html CHANGED Viewed

@@ -1,40 +1,53 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Spider-Man Image Gallery</title>
     <style>
-        /* Style for the page header */
-        h1 {
-            text-align: center;
-            background-color: #333;
-            color: #fff;
-            padding: 20px;
         }
-        /* Style for the image gallery container */
-        #image-gallery {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 20px;
-            padding: 20px;
-        }
-        /* Style for individual images */
-        #image-gallery img {
-            max-width: 100%;
             height: auto;
-            border: 1px solid #ccc;
-            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
         }
     </style>
 </head>
 <body>
-    <h1>Spider-Man Image Gallery</h1>
-    <div id="image-gallery"></div>
-    <script src="script.js"></script>
 </body>
 </html>

 <!DOCTYPE html>
+<html>
 <head>
     <meta charset="UTF-8">
+    <title>Spider-Man Gallery</title>
     <style>
+        /* Basic CSS for gallery layout */
+        .gallery {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 10px;
         }
+        .gallery img {
+            width: 100%;
             height: auto;
         }
     </style>
 </head>
 <body>
+    <h1>Spider-Man Gallery</h1>
+    <div class="gallery">
+        <!-- JavaScript will populate this section with images from the folder -->
+    </div>
+    <script>
+        // JavaScript code to load images from the folder
+        const galleryContainer = document.querySelector('.gallery');
+        // Replace 'spidey_images/' with the actual path to your image folder
+        const folderPath = 'spidey/';
+        // Fetch a list of image files from the server
+        fetch(`${folderPath}`)
+            .then(response => response.text())
+            .then(text => {
+                // Split the response into lines, assuming each line is a file name
+                const imageFileNames = text.split('\n').filter(Boolean);
+                // Loop through the file names and create img elements
+                imageFileNames.forEach(fileName => {
+                    const img = document.createElement('img');
+                    img.src = `${folderPath}${fileName}`;
+                    img.alt = fileName;
+                    galleryContainer.appendChild(img);
+                });
+            })
+            .catch(error => {
+                console.error('Error loading images:', error);
+            });
+    </script>
 </body>
 </html>