Don’t re-invent the wheel. That’s a motto that every good programmer and web developer lives by. If we’re being creative or original it’s usually in knowing which components and scripts to combine, amongst all those that have been created by other people; and in knowing how each of those components can be tweaked and configured to produce a good solution.
In web development this amounts to a synergy of languages, APIs, engines and interfaces working in blissfully ignorant harmony to provide rich functionality. This is the beauty of web development in the age of its blooming youthfulness, following the awkward stumblings of its infancy.
Incidentally, I think this is the characteristic of this kind of work that conventional programmers, or software engineers – the builders of native applications and the like – find repugnant: its tendency to get messy, its lack of established standards, and possibly most of all its reliance on HTML and the inherent statelessness of the medium.
Recently I put together a little photo gallery as part of the media page of an events agency website. I used these components:
It came about from a last-minute request by the client to have photos from their Flickr account displayed on their website. With a little Googling I hit upon a nice three-way partnership that would be applicable in many situations.
This little self-contained project neatly illustrates the day-to-day life of a web developer, and I’m interested in exploring that. What I find interesting about it, in retrospect, is that in many ways the solution isn’t original. Very little of the code is mine and I didn’t have to write any complex algorithms. Far from it. There is always a level of customization, of “bespokeness,” because clients’ needs are different, but the trick is knowing at which level to start using pre-existing components. Could there be a formula for that, I wonder?
By the way, the demo looks best in Firefox, because it gives the gallery container rounded corners. I did recently implement a cross-browser solution for rounded corners on richardspencer.ca, but now I’ve had enough of rounded corners so I haven’t bothered to do that here.
Rounded corners. That phrase, “rounded corners,” along with “wet dust,” is bouncing around my head right now. It’s mildly annoying but probably not harmful. Anyway, I’m thinking that if I use the phrase (“rounded corners”) enough times its power and longevity will somehow be neutralized or dissipated. On the downside, Google may penalize me for perceived keyword stuffing.
phpFlickr
I’ve been using Flickr for over a year in my capacity as a photographer of lifebuoys, bollards, grass, and other such excitements, but I’d never used the API. If there are any non-developers still reading this, an API is an Application Programming Interface, which allows programs or scripts that you write to talk to some other program when they are run, for example, by a web page in a browser. In this case the “other program” is Flickr, whose data you can access by communicating with the Flickr API, the set of publicly available functions that have access to that data. So, at its most elementary, you can write a script inside a web page that displays a list of the photo URLs of a particular Flickr user.
Well, phpFlickr makes all this very easy to do from PHP. It’s just a very nice wrapper class for calling Flickr API methods. To use it you’ll need to get a Flickr API key.
jCarousel
This is a nice little scrolling image gallery built on jQuery. It’s highly customizable and it’s obvious from the outset what everything does. When you’ve got a job to do quickly, this kind of thing is great. It consists essentially of a javascript file and some styles, though the download comes with jQuery too.
For my own photography site I use Galleria, rather than jCarousel, and it’s lovely, but those photos reside at the site, not on Flickr, and it seems natural to use Galleria for a gallery that takes up the whole screen, whereas jCarousel can be neatly squeezed into small parts of a page. But while writing this post it did occur to me to try using Galleria to make a Flickr gallery, and I had a wee go, but stopped before I got in too deep.
Get jCarousel and all its dependencies in one download >>
Lytebox
Now you could probably use something else for this: something that uses jQuery. I had a look recently and there’s a ridiculous profusion of pop-up scripts. Anyway, last year, when I was using Lightbox for my photography site, I wanted something similar and readymade to display pages. That’s when I found Lytebox.
In Firefox and Chrome it does a little dance when you click next or previous, and there is some flashing in all browsers. In my more sensitive, fragile moments I find this quite unsettling, but otherwise it does the job quite nicely. You don’t need jQuery, prototype, scriptaculous or anything to use it, which is nice.
However, if you’re already using one of those – as I am here with jCarousel – then you could get a similar modal popup that consists of a much smaller chunk of code than you need for Lytebox, which does it all on its own.
So if you want more finesse and efficiency, have a look at what’s been built with jQuery:
jQuery popup plugins at vision-media.ca
jQuery popup plugins at downloadjavascripts.com
The code
The gallery page is a PHP file, and it starts with the code that gets the photos from Flickr:
// Include class which directly accesses Flickr API
require_once("phpFlickr-2.3.0.1/phpFlickr.php");
// Create an instance of the class with the Flickr API key
$f = new phpFlickr($yourFlickrAPIKey,$yourFlickrAPISecret);
// Get some photos from the account. The first parameter is my
// Flickr user id, and 30 is just the number of photos to be
// returned, hardcoded for the demo
$photos = $f->people_getPublicPhotos("23362506@N04",null,null,30,1);
//Get the number of photos for later, cos you probably wouldn't
//be hardcoding it like I am here
$numberofphotos = count($photos['photos']['photo']);
?>
$yourFlickrAPISecret stands for the FlickrAPI “secret” string that you get with your Flickr API key.
For FlickrAPI documentation, go to the Flickr API pages or use the handy links provided in the comments for each method of the phpFlickr class.
A bit later, in the <head> section, I bring in the javascript and styles, and create the jCarousel:
<script src="js/lytebox.js" type="text/javascript"></script>
<!-- jQuery library -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<!-- jCarousel library -->
<script src="lib/jquery.jcarousel.pack.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('#mycarousel_photo').jcarousel();
});
// ]]></script>
Note that when setting up the jcarousel object above, you can can pass in several configuration settings.
Now I build the gallery of thumbnails by looping through the Flickr data that I got from the feed at the top:
<?php
for ($i = 0; $i < $numberofphotos ; $i++) {
$photo = (array)$photos['photos']['photo'][$i];
$thumburl = "http://farm" . $photo['farm'] . ".static.flickr.com/" . $photo['server'] . "/" . $photo['id'] . "_" . $photo['secret'] . '_s' . ".jpg";
$normalurl = "http://farm" . $photo['farm'] . ".static.flickr.com/" . $photo['server'] . "/" . $photo['id'] . "_" . $photo['secret'] . ".jpg";
$photopageurl = "http://www.flickr.com/photos/alistairrobinson/".$photo['id'];
echo '<li><a href="photo.php?flickrImageURL='.$normalurl.'&flickrPageURL='.$photopageurl.'" rel="lyteframe[photos]" rev="width: 650px; height: 550px; scrolling: no" title="'.$photo['title'].'"><img src="'.$thumburl.'" class="thumbnail" /></a></li>';
}
?>
</ul>
In each iteration, I get the Flickr URL of the thumbnail (named with the standard suffix …_s.jpg), that of the main image (the default image shown on the Flickr photo page), and that of the photo page itself.
In terms of Lytebox, essentially I’m building list items, each containing an image link. The link’s got to be of the following form to work:
The value of rel, “lyteframe[photos],” groups all the thumbnails together so that you can navigate next and previous within Lytebox.
The title is what will appear as the caption of the photo in lightbox. The value of the href is photo.php, passing in two parameters, flickrImageURL and flickrPageURL, which are given the values of $normalurl and $photopageurl respectively. $thumburl is the used to display the thumbnail for the link.
Here’s photo.php, which is the page that’s displayed inside the Lytebox popup:
$flickrPageURL = $_GET["flickrPageURL"];
$flickrImageURL = $_GET["flickrImageURL"];
?>
<html>
<body style="text-align:center;">
<div style="position:relative;top:30px;font-family:Verdana;">
<?php
echo '<a target="_none" href="'.$flickrPageURL.'" title="Got to the Flickr photo page"><img alt="Got to the Flickr photo page" border="0" src="'.$flickrImageURL.'"></a>';
?>
</div>
</body>
</html>
The image links back to the Flickr photo page, as they require you to do to use the API.
And that’s it. That’s the organic, slithery, octopussy beast that is web development, in a nutshell.
Yes: an octopus in a nutshell.