Last active
August 15, 2025 20:19
-
-
Save thinkphp/aabb394fc1ae1268b363e8d8a1370ea7 to your computer and use it in GitHub Desktop.
render-art-gallery.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Render Art Gallery</title> | |
| </head> | |
| <body> | |
| <h1>Roger's Art Gallery</h1> | |
| <div id="gallery-container" class="gallery-container"> | |
| <div class="loading">Loading Gallery...</div> | |
| </div> | |
| <script> | |
| //function to fetch gallery data from database and RENDER Gallery | |
| async function loadGallery() { | |
| try { | |
| const response = await fetch("get_gallery.php"); | |
| if(!response.ok) { | |
| throw new Error('HTTP Error! status: ${response.status}'); | |
| } | |
| const galleryData = await response.json(); | |
| //clear existing gallery content | |
| const galleryContainer = document.getElementById("gallery-container"); | |
| galleryContainer.innerHTML = "" | |
| //render gallery items paintings | |
| galleryData.forEach((item, index) => { | |
| console.log(item) | |
| const galleryItem = document.createElement("div"); | |
| galleryItem.className = "gallery-item"; | |
| galleryItem.innerHTML = ` | |
| <a target="_blank" href="img/${item.filename}"> | |
| <img src="img/${item.filename}" alt="Roger's Art" data-index=${item.id}> | |
| </a> | |
| <div class="gallery-caption">${item.caption}</div> | |
| <div class="text-box-gallery"> | |
| <h3>${item.title}</h3> | |
| <p class="gallery-size">Size: ${item.size}</p> | |
| <p class="price"> | |
| <button class="add-to-cart" data-id="${item.id}">add to cart</button> | |
| ${item.price} | |
| </p> | |
| </div> | |
| `; | |
| galleryContainer.appendChild(galleryItem); | |
| }) | |
| console.log("Gallery loaded successfully") | |
| } catch(error) { | |
| //console.error("Error loading gallery", error); | |
| const galleryContainer = document.getElementById("gallery-container"); | |
| galleryContainer.innerHTML = "<p>Error loading gallery. Please try again later</p>"; | |
| } //end try..catch | |
| }//end function | |
| document.addEventListener("DOMContentLoaded", function() { | |
| loadGallery(); | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment