PHP HTML

VERY SIMPLE PHP IMAGE GALLERY

(without a database)

GET IMAGES IN GALLERY FOLDER $img = glob("gallery/*.jpg,jpeg,gif,png ,bmp,webp}", GLOB_BRACE);

PHP GET ALL IMAGE FILES

01

PHP-HTML <IMG> TAGS

02

OUTPUT HTML <IMG> TAGS <div class="gallery">foreach ($img as $i) {   printf("<img src='gallery/%s'>",    rawurlencode(basename($i)));   } ?></div>

CSS GALLERY GRID LAYOUT

03

GRID LAYOUT - 3 PER ROW .gallery {   display: grid;   grid-template-columns: repeat(3, 1fr); }

THUMBNAILS .gallery img {   object-fit: cover;   width: 100%; height: 200px; }

JS CLICK TO FULLSCREEN

04

GET ALL IMAGES var all = document.querySelectorAll (".gallery img"); TOGGLE FULLSCREEN for (let i of all) { i.onclick = () => {   i.classList.toggle("full"); }; }

CSS FULLSCREEN IMAGE

05

FULLSCREEN IMAGE .gallery img.full {   position: fixed; object-fit: contain;   top: 0; left: 0; z-index: 999;   width: 100vw; height: 100vh; }