With the growing popularity of using Flickr to manage photos, more and more people are looking for an easy way to display these photos on their website.

After some playing around, I’ve settled with the phpFlickr and Lightbox combination to nicely display photo galleries on a website. PhpFlickr is a class written by Dan Coulter to act as a wrapper to Flickr’s API, and lightbox is a very simple and elegant way to display photos on a page. This tutorial will teach you how to quickly setup a photo gallery with phpflickr and lightbox on your own website.

So what do you need?

1. A flickr account (a free one with 100mb monthly upload is fine for most). You will also need to know your user ID (usually in the format xxxxxxxx@Nxx)

2. Latest version of phpflickr: can be downloaded here

3. Lightbox 2 java script: downloaded here

4. Obviously, your photos.

What to do:

1. Upload the photos you want to display to your Flickr account. Organize the photos into Sets to best manage the separation of “galleries.”

2. Install phpFlickr and Lightbox by easily extracting them to the directory of your choice (ie. /photos/ on your website). Both phpFlickr and Lightbox are ready to go out-of-the-box so you won’t need to play around with them too much if you don’t want to.

3. Include the necessary content in your php file.

For lightbox, the following will go in the header section of your php file:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript"
          src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

and

<link rel="stylesheet" href="css/lightbox.css"
     type="text/css" media="screen" />

For phpFlickr, add the following code in the header section of your php file:

<?php
 require_once("phpFlickr/phpFlickr.php");
 $f = new phpFlickr("b16911dd0ec59f16ed66e80711edbdaf");
 $user = "xxxxxxxx@Nxx";
 $ph_sets = $f->photosets_getList($user);
?>

Where the user value can be found in your flickr account.

Now we are ready to use phpFlickr to import and Lightbox to display our pictures from our Flickr sets. Here’s a simple bit of code I use that imports and displays the photos:

<div id="gallery">
 <?php foreach ($ph_sets['photoset'] as $ph_set): ?>
  <div class="photosets">
  <p><h2><?php print $ph_set['title']; ?></h2></p>
  <?php $photoset_id = $ph_set['id'];
  $photos = $f->photosets_getPhotos($photoset_id);
  foreach ($photos['photoset']['photo'] as $photo): ?>
  <div class="photos">
   <a rel="lightbox"
     href="<?= $f->buildPhotoURL($photo, 'medium') ?>"
     title="<?= $photo['title'] ?>">
   <img src="<?= $f->buildPhotoURL($photo, 'square') ?>"
     alt="<?= $photo['title'] ?>" title="<?= $photo['title'] ?>" />
   </a>
  </div>
  <?php endforeach; ?>
  </div>
 <?php endforeach; ?>
</div>

The CSS I use for this is:

#gallery {
	position: relative;
	float: left;
	width: 600px;
	padding: 0px 15px 10px 15px;
}

.photos {
	position: relative;
	float: left;
	display: block;
	padding-bottom: 10px;
}
.photosets {
	clear: both;
	padding-top: 1px;
}
.photosets h2 {
	color: #000;
}

The full documentation on both lightbox and phpFlickr is available in their downloaded packages. They are both quite powerful. The example given here is just a simple way to grab all the Sets in your Flickr account and display them in a gallery format.

I recently added this to the site designbyroeland.com. You can check out the example of how it will look here. Simple. Elegant.

EDIT:

If you’re looking to only display one set, this can be done with the following:

<?php $photos = $f->photosets_getPhotos('xxxxxxxxxxxxxxxxx'); ?>
<?php foreach ($photos['photo'] as $photo): ?>
<div class="photos">
<a rel="lightbox" href="<?= $f->
    buildPhotoURL($photo, 'medium') ?>"
    title="<?= $photo['title'] ?>">
<img src="<?= $f->buildPhotoURL($photo, 'square') ?>"
    alt="<?= $photo['title'] ?>" title="<?= $photo['title'] ?>" />
</a>
</div>
<?php endforeach; ?>

Where the xxxx’s are replaced with the set ID that you can find in your flickr URL for that set. Feel free to republish this guide if you wish, but please try to link back if possible. Thanks!