PHP HTML

SIMPLE IMAGE GALLERY IN PHP WITHOUT DATABASE

GET IMAGE FILES IN FOLDER $images = glob("gallery/*. {jpg,jpeg,gif,png,bmp,webp}",  GLOB_BRACE);

PHP GET IMAGES

01

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

HTML IMAGE GALLERY

02

GALLERY CSS

03

GRID LAYOUT - 3 PER ROW .gallery {   display: grid; grid-gap: 10px;   grid-template-columns: repeat(3, auto); }

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

THE  JAVASCRIPT

04

GET ALL IMAGES var all = document.querySelectorAll (".gallery img"); for (let i of all) { i.onclick = () => {   EXIT FULLSCREEN   if (document.fullscreenElement)   { document.exitFullscreen(); }     ENGAGE FULLSCREEN   else { i.requestFullscreen(); }   };}