Projects: Tags: jQuery: Speaking Gump

Information

Timeline: Fall 2009
Application Type: Photo Manager
Status: Complete
Technologies: PHP, MySQL, jQuery, jQuery UI
Partners: BWD Staff

Steve Weber worked for Bubba Gump Shrimp Co. as their official Forrest Gump Impersonator, and now he is a motivational speaker. For part of his website, he wanted a photo gallery to show photos of him in-character at various locations around the US.

This was an interesting project to work on, and not just because of the fun subject matter. I was able to put a lot of thought into the user interface, and I feel that the end result is easy-to-use and intuitive, and feels more like a traditional desktop application than a website.

Like many web apps, the photo editor uses AJAX extensively. Paging, photo adding, photo editing, and photo deleting is all accomplished over AJAX. I used jQuery heavily while developing this app, and as a result really strengthened my understanding of jQuery itself and JavaScript in general. The app also relies on the JQuery UI for drag-and-drop, utility windows, and so on.

I think it's the little touches that really make the app. Much like a desktop app, you can use the arrow keys to change the currently-selected photo. If you hit 'previous' on the first photo on the page, the app will scroll to the previous page (it works the other way, too). You can also use the keyboard to edit or delete photos. To move a photo to a different page, you drag it to either the "Prev" or "Next" tabs. I even had some time to put in a "Help" screen that explains it all.

Unfortunately, I didn't have the time to integrate this code into the Nifty CMS. This would have been a great module to add, as photo galleries are a commonly-requested feature and sometimes a full photo manager (like Gallery 2) is overkill. I also didn't have time to add 'fallback' features for browsers that don't support JavaScript. Since this was a backend-only feature and we knew the client, it was acceptable. Usually I do try to write web code that falls back to something that will work without JavaScript or other Web 2.0 features.

There was also a version of the Events module from the Nifty CMS, but this was rather simple and uninteresting compared to the photo manager.

Gallery

IMAGE: Front End Display

The front end display of the photos.

IMAGE: Backend Photo List

The backend photo list page.

IMAGE: Edit Photo Window

The Edit Photo window, accessible by double-clicking a photo or by selecting it and clicking 'Edit Photo.'

IMAGE: Events Manager

Viewing the list of events in the backend.

IMAGE: Using the Backend

Using the backend: navigating through the pages, adding a photo, dragging and dropping it, editing it, dragging it to a new page, and finally deleting it.

Tags

AJAX BWD jQuery jQuery UI MySQL Nifty Framework PHP phpthumb Website