You’ve seen them all over the web–image galleries for your viewing pleasure! You’ve looked for decent image gallery software, but none of them seem to suit your needs, while others have a lot of extra features you don’t need. And while you’ve seen some others that are just what you’re looking for, you can’t easily integrate them into your website. To solve this problem, I wrote my own photo gallery script and I’m going to share it with you in this article.
The first script I used for my photo gallery was created by Paul Oliver. He used procedural code in order to create a gallery, but his gallery only dealt with one directory. This meant that if you had 50 events you needed galleries for, you couldn’t use one script, but had to use 50 different ones, or know a good bit about php in order to make it work.
Paul’s flat system worked for a while. But as we develop sites, we need the ability to add more free photos into different events, even different categories. Paul’s script wasn’t very flexible so I couldn’t use it for that purpose. Using his concepts, however, I was able to create a simple Photo Gallery that would work as we needed.
Initial Setup
To start things off, we need an active working directory. We’ll name this directory “gallery”. All the files and directories mentioned in this article will be in that directory. Once we’ve got that set up, we need to create a few folders. We are going to have an “images” folder (duh! right?), and within that a “root photos” folder. We’ll name this folder “photos”. You may be wondering why we need a root photos folder? We need it because we may merge our site’s images folder with the one where we host our image gallery photos. If that is the case, this directory will make that move very simple. Within the “images” folder we’ll need a folder to hold small icons for categories and events. This directory will be called “icons”.
We now have our working directory, along with the image and photo directories. Now we need directories for categories, events and thumbnails. With this in mind, inside of our “photo” directory we will create a directory called “Events”, and within that one we’ll create one called “My_Gallery_Example” and within that we’ll create yet another directory called “thumbs”. Now that we’ve created all of the directories we need, let’s create the default documents. We will be using two documents (this is a very small script!!); one will be our script resource page (“class.photogallery.php”) and the other will be the main page that users will visit in order to browse the gallery (“photos.php”). With everything set up, here’s an overview of how things should appear:
/gallery/
|
+- images
| |
| +- icons
| |
| +- photos
| |
| +- Events
| |
| +- My_Gallery_Example
| |
| +- thumbs
|
+- photos.php
|
+- class.photogallery.php
NOTE: Directories are listed in blue and files are listed in red.
About The Script
One thing you may notice is that we named the php file that will do the brunt of the work “class.photogallery.php”. That’s because this is an object-oriented script. I chose this method because it reduced the overhead with the gallery. Don’t worry–there’s nothing too crazy in there, but I’ll explain all of what is going on with the code as I go along.
Let’s start things off with the easy part–the HTML.
