PHP HTML
(without a database)
GET IMAGES IN GALLERY FOLDER $img = glob("gallery/*.jpg,jpeg,gif,png ,bmp,webp}", GLOB_BRACE);
OUTPUT HTML <IMG> TAGS <div class="gallery">foreach ($img as $i) { printf("<img src='gallery/%s'>", rawurlencode(basename($i))); } ?></div>
GRID LAYOUT - 3 PER ROW .gallery { display: grid; grid-template-columns: repeat(3, 1fr); }
THUMBNAILS .gallery img { object-fit: cover; width: 100%; height: 200px; }
GET ALL IMAGES var all = document.querySelectorAll (".gallery img"); TOGGLE FULLSCREEN for (let i of all) { i.onclick = () => i.classList.toggle("full"); }
FULLSCREEN IMAGE .gallery img.full { position: fixed; object-fit: contain; top: 0; left: 0; z-index: 999; width: 100vw; height: 100vh; }