Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

2 Steps Very Simple PHP Gallery (From Folder No Database)

INTRODUCTION
NO GIMMICKS IMAGE GALLERY

Welcome to a step-by-step tutorial on how to create a very simple PHP gallery. Tired of all those “complicated” gallery plugins on the Internet? This guide will show you how to create a no gimmicks image gallery – Directly reads image files from a folder, and with no database required at all. Read on!

I have included a zip file with all the source code at the end of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

CONFESSION
AN HONEST DISCLOSURE

Quick, hide your wallets! I am an affiliate partner of Google, eBay, Adobe, Bluehost, Clickbank, and more. There are affiliate links and advertisements throughout this website. Whenever you buy things from the evil links that I recommend, I will make a commission. Nah. These are just things to keep the blog going, and allows me to give more good stuff to you guys - for free. So thank you if you decide to pick up my recommendations!

NAVIGATION
TABLE OF CONTENTS

Step 1
The Basic Gallery

Step 2
Lightbox Magic

Extra
Download & More

Closing
What’s Next?

STEP 1
THE RAW BASIC GALLERY

Let us start by creating a very basic skeleton gallery – Requiring only a few lines of PHP code, some HTML, and CSS… So simple that you will laugh all the way to the moon.

THE PHP & HTML

1-basic.php
Very Simple PHP gallery
  

Yep, that’s all to the gallery. All we are doing here is to get a list of image files using glob from the gallery folder first, then throw them into a 

gallery container.

THE CSS

1-basic.css
/* [SITE] */
body, html {
  padding: 0;
  margin: 0;
}

/* [GALLERY] */
#gallery {
  max-width: 1200px;
  margin: 0 auto;
}

#gallery img {
  box-sizing: border-box;
  width: 25%;
  max-height: 150px;
  padding: 5px;
  /* fill, contain, cover, scale-down : use whichever you like */
  object-fit: cover;
  cursor: pointer;
}

/* [RESPONSIVE GALLERY] */
@media screen and (max-width: 850px) {
  #gallery img {
    width: 33%;
  }
}

@media screen and (max-width: 640px) {
  #gallery img {
    width: 50%;
  }
}

Of course, we are not so “barbaric” to just row out raw images without any cosmetics. So here is some responsive CSS magic to make the images look more like a legit gallery – Please do feel free to modify these to fit your own project.

STEP 2
ADDING A LIGHTBOX

Actually, we already have a gallery. So this is kind of an extra step for those of you who want to show the full-sized image when the user clicks on a gallery item.

THE (SLIGHTLY IMPROVED) PHP & HTML

2-box.php
Simple PHP gallery

Not much of a difference here, except:

  • Additional Javascript to control the full-sized image popup.
  • Two new 
    for the image popup – One is a full-page sized solid color background, the other to put the image into.
  • Added click event to the images in the gallery.
  • THE CSS

    2-box.css
    /* [SITE] */
    body, html {
      padding: 0;
      margin: 0;
    }
    
    /* [GALLERY] */
    #gallery {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    #gallery img {
      box-sizing: border-box;
      width: 25%;
      max-height: 150px;
      padding: 5px;
      /* fill, contain, cover, scale-down : use whichever you like */
      object-fit: cover;
      cursor: pointer;
    }
    
    /* [RESPONSIVE GALLERY] */
    @media screen and (max-width: 850px) {
      #gallery img {
        width: 33%;
      }
    }
    
    @media screen and (max-width: 640px) {
      #gallery img {
        width: 50%;
      }
    }
    
    /* [LIGHTBOX] */
    #lfront, #lback {
      position: fixed;
      opacity: 0;
      visibility: hidden;
      transition: all 0.5s;
      width: 100%;
    }
    
    #lfront img {
      max-width: 100%;
      max-height: 100%;
      margin: 0 auto;
      display: block;
    }
    
    #lback {
      height: 100vh;
      background: #000;
    }
    
    #lfront.show {
      z-index: 1000;
      opacity: 1;
      visibility: visible;
    }
    
    #lback.show {
      z-index: 999;
      opacity: 0.8;
      visibility: visible;
    }

    Basically just added a new lightbox section to the CSS – We will be playing with the .show CSS class to show/hide the popup.

    THE JAVASCRIPT

    2-box.js
    var gallery = {
      show : function(img){
      // show() : show selected image in light box
    
        var clone = img.cloneNode();
        clone.onclick = gallery.hide;
        var front = document.getElementById("lfront");
        front.innerHTML = "";
        front.appendChild(clone);
        front.classList.add("show");
        document.getElementById("lback").classList.add("show");
      },
    
      hide : function(){
      // hide() : hide the lightbox
    
        document.getElementById("lfront").classList.remove("show");
        document.getElementById("lback").classList.remove("show");
      }
    };

    Only 2 functions in this script:

    • Show: fired when the user clicks on an image. Duplicates the selected image, puts it into the lightbox, then show the full-sized image by adding the .show CSS class.
    • Hide: Closes the full-sized image popup. Simply removes the .show CSS class.

    EXTRA
    DOWNLOAD & MORE

    That’s it for all the code. Here is the download link as promised, and a little bit of extra that you may find useful.

    EXTRA) AUTO THUMBNAILS GENERATOR

    As simple as this gallery might be – You have to remember that it is loading whatever full-sized images that you put inside the gallery folder… That is not good if you are trying to create a “fast loading website”. So here is one last extra that will automatically generate thumbnails.

    3-thumbnail.php
     $height ? $maxLong / $width : $maxLong / $height ;
        $newWidth = ceil($width * $ratio);
        $newHeight = ceil($height * $ratio);
        $source = imagecreatefromjpeg($dir . $img);
        $destination = imagecreatetruecolor($newWidth, $newHeight);
        imagecopyresampled($destination, $source, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height);
        imagejpeg($destination, $tdir . $img, $quality);
      }
    }
    
    // DRAW HTML ?>
    
    
      
        Simple PHP gallery

    Finally, all we need to do is to modify the show function a little to show the full-resolution image on click:

    3-thumbnail.js
    show : function(img){
    // show() : show selected image in light box
    
      var clone = img.cloneNode();
      var domain = clone.src.substr(0, clone.src.lastIndexOf("/",clone.src.lastIndexOf("/")-1)+1);
      var image = clone.src.substr(clone.src.lastIndexOf("/")+1);
      clone.onclick = gallery.hide;
      clone.src = domain + "gallery/" + image;
      var front = document.getElementById("lfront");
      front.innerHTML = "";
      front.appendChild(clone);
      front.classList.add("show");
      document.getElementById("lback").classList.add("show");
    }

    DOWNLOAD

    Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

    CLOSING
    WHAT’S NEXT?

    We have come to the end of this short tutorial, and I hope that it has helped you to create a better (and simpler) image gallery. If you have anything to share, please feel free to comment below. Good luck and happy coding!


    The post 2 Steps Very Simple Php Gallery (From Folder No Database) appeared first on Code Boxx.



This post first appeared on Xxxxxxxxx, please read the originial post: here

Share the post

2 Steps Very Simple PHP Gallery (From Folder No Database)

Email
Facebook
Pinterest
Twitter
×

Subscribe to Xxxxxxxxx

Get updates delivered right to your inbox!

Thank you for your subscription

×