My latest project, a navigable image/flash gallery, is now live at www.sourapplestudios.com.
It likely would have taken me less time to use an existing framework, but I wanted to do it from scratch for the sport of it, and to be able to address all of the client's needs.
The client wanted to be able to:
- Seamlessly switch between images and flash animations.
- Add a description and title to each image.
- Add a 'vulgar' flag to an image, which visually warns a user before the image is displayed.
- Add a vertical scrollbar to images marked as 'tall'
- Assign several images to a 'comic' sequence, so that if the user navigates backwards and stumbles on its last page, he's taken to the first one instead.
User-specified image data is stored as JSON, parsed using 300-lines' worth of PHP code, and converted to HTML elements with 'data-' attributes.
This, in turn, is interpreted and displayed using jQuery whenever a tile is clicked on.
The flash animations are displayed using swfobject, a JS library.
All-in-all, the conversion process looks something like this:
And when clicked, the tile expands into this:
(There's only so much that can be related through MS Paint flowcharts and bad writing, so be sure to visit the link for the full experience)
Granted, I could have just employed jQuery and AJAX to fetch and parse through the JSON data, but I wanted to get some practice parsing through JSON
and addressing edge-cases using PHP. Building an API to address the former scenario would not have scratched that itch.
Plus, what better way to distinguish between the back- and front-end code than to have it written in different languages?
The code's also got a number of features that will probably never see the light of day but are shiny nevertheless. Among other things,
the PHP part checks against missing but crucial parameters -- like filenames and flash animation dimensions -- and assigns default
values/logs errors accordingly; I imagine this is a common-sense practice for everyone in the biz, but was a learning experience and a
sense of pride to me personally. In addition, JS and PHP work together to automatically detect a tile's characteristics and adjust the display
accordingly. Does the JSON data specify an image title? Show it, then. Is there a description, too? Stick in an 'info' icon to let the user know.
Want to keep the JSON title/description in place for reference, but suppress it for the user? Change a couple of flags in the JS file.
The only problem I've found with the gallery is that it's a bit clunky on mobile when an orientation change takes place. My guess is that the
problem is rooted in window dimensions, which probably change when the device is flipped. I developed a sort of brain rot while trying to get
the images to load and re-size correctly, so this is something I might come back to later.