Building AJAX/PHP image gallery - Part I

Introduction

Me personally? I am a Flash freak, I prefer Flash to anything else for the front-end development stuff. The trouble is you can’t always go Flash; there are a lot of situations where HTML is your only choice. In those situations AJAX is the next best thing after the sliced bread.

In this article, as it follows from the title, we will build an AJAX-driven image gallery. Users would be able to pick from a list of gallery albums and load the album’s thumbnails. Selecting a thumbnail would display the corresponding image. All the albums along with the images will be physically stored on the web server. Using PHP as the server-side language our AJAX application will read and display the content of the folders on the fly thus eliminating the need of creating and maintaining the gallery database.
Of course (as you would expect from AJAX) there will be no page refreshes as the whole point here is to create a cool, desktop-like experience (right?).

I have many times created and used similar applications in Flash. This and the following articles is an attempt to a certain extent mimic Flash behavior.

Note: Check also the DMXzone own CSS Image Gallery extension for amazing pure CSS galleries and slideshows with a fluent navigation and image transitions!

Overview

Setting up the Folder Structure

No database, -you say, so what’s that catch? We need to create some kind of a structure, and in this case it would be the folder structure on the server.

We achieve the goal by setting up the directories in a particular manner. Once you understand the principle you can deviate from the described order, but for now just follow along.

You can create this folder tree on your existing web site or a local virtual directory. In my example folder “Photo” is the web site root directory which can be accessed through http://localhost/photo.

The gallery (represented by the albums folder in web site root directory) may contain an unlimited number of albums each of which is a separate folder inside the albums folder.
Our AJAX application will read and display the content of the folders on the fly.

Alex July

Alex July is a Vancouver-based (Canada, British Columbia) Web Developer/ Graphic Artist who has an extensive experience in both creative realms.
He is also a host of Linecraft.com where he is showcasing his skills and sharing experience with the developers community. For the past 3 years Alex has been focusing on the development of Rich Internet Applications using Macromedia Flash technology.

When away from the computer Alex is practicing Martial Arts, playing guitar and enjoying time with his wonderful family.

See All Postings From Alex July >>

Reviews

Be the first to write a review

You must me logged in to write a review.