PHP HTML

SIMPLE IMAGE GALLERY IN PHP WITHOUT DATABASE

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

PHP AND HTML

01

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

GALLERY CSS

02

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

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

THE  JAVASCRIPT

03

window.addEventListener("load", function(){   GET ALL IMAGES   var all = document.querySelectorAll   (".gallery img");   ATTACH CLICK LISTENER   for (let i of all) { i.addEventListener   ("click", function(){     EXIT FULLSCREEN     if (document.fullscreenElement)     { document.exitFullscreen(); }     ENGAGE FULLSCREEN     else { this.requestFullscreen(); }   });} });