Familiarity: HTML/XHTML/HTML5 + CSS + PHP

Time Required: 5 Minutes or less

 

You can do really neat things with the raw power of Arrays. I showed you an example of parsing Multidimensional arrays in PHP in my previous post. In this post, I’m going to show you how to create a PHP gallery within 5 minutes. The basic assumption is that the reader is familiar with XHTML/CSS and general programming buzz words (e.g. variables, functions, strings, arrays, etc.)

Here’s what we’ll be creating at the end of this post:

Simple-php-gallery-snapshot
Simple-php-gallery-snapshot2

There, a pretty simple gallery that has been sexified (if that is even a term) using Lightbox 2 and has raw pagination powers, thanks to the array_chunk() PHP function. Okay, before you get totally impatient to see how does this work, I should better start showing you “how”:

First, let’s create a basic markup structure:

Save the file as “index.php” in your root project directory, i.e., Gallery. Notice that I’ve downloaded Lightbox 2, extracted it to the project directory (Gallery, in this case) and linked the downloaded files from our main index.php file.

Now the CSS part (css/gallery.css)

Now is the time to get PHP back! Create a new file named “gallery.php” in the project root directory and type this code:

As you can see, I’ve wrapped the code inside a function for portability. The function takes one argument — $path. Save the script and return back to “index.php”. In this file, you need to do only two things to get the Gallery running:-

  • Include the PHP code file, gallery.php, using include()
  • Call the function — genGallery(), supplying the required parameter.

 

That’s it! Demo

Note that there are lots of things that can be improved even in this tiny little script. And there are way too many nice little things that could make this gallery a rockstar! But, I only had 10-15 minutes to create this script and write this post so.. 

If I were to spend an hour on this script, it’d had all these things:

  • Check proper file extensions (pretty easy to implement)
  • Fetch EXIF data and display it nicely using the powerful of JavaScript or your favorite JS Library.
  • Add “star rating” feature so people could give your image FIVE STARS! 
  • Add tagging support
  • Add commenting
  • Pretty URLs
  • CRUD, preferably using SQLite
  • Authentication, using SQLite

Might sound like a lot but all the things listed above are pretty easy to implement in PHP. Ah, and suppose if Object Orientation was used at that! If you like this post, go ahead and create your versions (including added functionalities/improvements).

Imagine, Learn and Create.

Tagged with →  
Share →
  • From the pictures i see that this is what i was searching for, but i get an parse error on gallery.php, can you help me?

    Thanks
    B

    • Hi Bruno,

      Thanks for stopping by! I’ve added a demo link that I had to remove after an unfortunate incident caused the site to lose many important files and its database.

      I quickly re-created the demo before writing this comment, with some changes in the Lightbox integration code (they seem to have moved from Prototype to jQuery). You may want to check any spelling mistake in your code.

      – Avinash

      • Thank you for re-create the demo. Can you please tell me how to:

        1- Reduce the size of thumbnails

        2- Make the pagination more atractive, more like what is on the picture above.

        3-Correct a a issue on pagination, it seems to paginate a 3rd page that has no images at all and gives an error it shows this: “Warning: Invalid argument supplied for foreach() in …/public_html/galeria/gallery.php on line 10”

        Thanks

%d bloggers like this: