Many people struggle with installing and setting up third-party gallery applications and although there are a couple popular image galleries that most web-hosts offer as an easy-to-install application, they can still be frustrating and pose many security issues for the inexperienced.

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.” The code below will not work if you have not put your photos into at least one set.

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: (it’s possible the folder might be called phpFlickr-1.3 if you are using the latest version.

<?php
 require_once("phpFlickr/phpFlickr.php");
 $f = new phpFlickr("b16911dd0ec59f16ed66e80711edbdaf"); // API
 $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['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; ?>

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!

EDIT (DESCRIPTION):

A lot of people have been asking me how to display the description of the Flickr photo instead of using the title within the lightbox display. Here is the change of code you will need in order to do this (very similar to the code in the tutorial, with 2 changes):

<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):
  $d = $f->photos_getInfo($photo['id']); ?>
  <div class="photos">
   <a rel="lightbox[]"
     href="<?= $f->buildPhotoURL($photo, 'medium') ?>"
     title="<?= $d['photo']['description'] ?>">
   <img src="<?= $f->buildPhotoURL($photo, 'square') ?>"
     alt="<?= $photo['title'] ?>" title="<?= $photo['title'] ?>" />
   </a>
  </div>
  <?php endforeach; ?>
  </div>
 <?php endforeach; ?>
</div>

The difference is the addition of the line $d = $f->photos_getInfo($photo['id']); as well as changing $photo['title'] with $d['photo']['description'] inside the ‘a’ lightbox tag. Unfortunately, this method isn’t very efficient as it calls the description inside the loop, which means it has to check the description for each photo. As far as I know there isn’t a more efficient way of grabbing all the descriptions for the photo set yet. I will keep my eyes peeled for it though.

EDIT (available sizes):

I use the size ‘medium’ in the above tutorial quite a bit. There have been a lot of questions about how to change this to its original size or to a larger size. There are a variety of sizes that are supported which include:

‘square’, ‘thumbnail’, ‘small’, ‘medium’, ‘medium_640′, and ‘large’. If you would like to display another size with lightbox, simply change where I have ‘medium’ to the option you’d like.