phpFlickr meets JQFlickr

Here is the story of me and the Flickr API. Once upon a midnight dreary, while I pondered, weak and weary, over many a quaint and curious volume of code...

First a little background, I have decided to find interesting ways of saving my clients money. Sure building a custom database, interface, and all the wonderful validation code that would be required to manage an online gallery would be straight forward and tons of fun but I think Flickr will work just fine. It also should be mentioned that their UI is pretty slick. Well let's dive in.

First my tools.
- PHP (of course)
- phpFlickr: phpFlickr Website
- Open Source Flickr Photo Gallery Using jQuery from Steve Dugas: Implementation of a sweet Flickr Gallery with jQuery

Now here's what I was looking to do. I wanted to be able to embed the photo album in a page but also have another page with a datagrid to show off my albums (sets to Flickr) to chose from. There are some products that do this but by using these tools I have total control over the css and layouts.

I am still working with a prototype but have some of the code in place so I will walk through the implementation.


Step 1:
Download/extract all the stuff.

Step 2:
start cutting and pasting and modifying until the code fits your style and frameworks. Ok here is how I did it. Since I run a MVC style navigation framework I decided to make 2 view files. "photosets.php" to show my sets and "photos.php" to show the photos in that set. These are very basic and hold my css data.

photosets.php
$f = new phpFlickr($api_key, $secret, 1);
$nsid = $f->people_findByUsername($username);
$photosets = $f->photosets_getList($nsid['id']);

?>
<div id="Photosets">
<h4><em>Please Select an Album to View</em></h4><br />
<?
foreach ($photosets['photoset'] as $set) {
$pid = $set['primary'];
$photo = $f->photos_getInfo($pid,NULL);
?>
<table border="0">
<tr>
<th align="center"><a href="?nav1=<?=$_GET['nav1'];?>&photoset=<?=$set['id'];?>"><?=$set['title'];?></a></td>
</tr>
<tr>
<td align="center"><a href="?nav1=<?=$_GET['nav1'];?>&photoset=<?=$set['id'];?>">
<img src='<?=$f->buildPhotoURL($photo, "thumbnail");?>' alt="<?=$set['title'];?>" name="<?=$set['title'];?>" border='0' id="<?=$set['title'];?>"></a></td>
</tr>
</table>
<?
}
?>
</div>

photos.php
<script type="text/javascript">
$().ready(function(){
$('#Photos').flickrGallery({
galleryHeight : 'auto',
useFlickr: 'true',
useFlickrLargeSize: 'true',
flickrAPIKey: '<?=$api_key;?>',
photosetID: '<?=$photoset;?>',
per_page: 50,
useHoverIntent: 'true',
useLightBox: 'true'
});
});
</script>
<a href="?nav1=<?=$_GET['nav1'];?>">Return to Albums</a>
<div id="Photos" align="center"></div>

Now for the engine I created a file "gallery.php" to toggle the views. It was very easy to instantiate the phpFlickr class and get our photosets. Remember to include all your files and be sure to check the path if something isn't working. Since both of these tools have great support sites I did not go into great detail about install and setup. This was just showing how simple it is to display all your Flickr albums and then use a nice jQuery plug-in to view the photos in that album in case you are looking for an easy way to do this.

I will post the url to my final implementation when it's complete.

I hope this was helpful and as always, good luck!

---

Brian J. has been involved in web design since 1997. He is the founder of True Vision Computer Services, Inc. His recent focus has been on web applications and information systems development.