On a recent personal project, I had the need to display some photos from Flickr on a separate site as a gallery with thumbnails. This was a good opportunity to use one of the many existing ports of the Flickr API. I chose phpFlickr to access my photo sets, and Shadowbox to display the results. These both proved to be good decisions, as it was quite easy to get up and running. I’ve taken a moment to write a simple example that uses these two open source libraries.
See the example here.
phpFlickr site
Shadowbox.js site
In this code I first import the shadowbox.js file and its style sheet. Next is a short script to instantiate Shadowbox with a few params.
I create an instance of the phpFlickr class, then use the custom key provided by Flickr to access their API. From there it a quick call to the photosets_getPhotos method to retrieve the desired photo set.
I loop the results and use the buildPhotoURL method to build a link to our medium size image that will go in the Shadowbox, and use the same method again to build the thumbnail image. Add a little logic and some break tags to format and we are done.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Gallery example using phpflickr and shadowbox</title>
<link rel="stylesheet" type="text/css" href="js/shadowbox-build-3.0rc1/shadowbox.css">
<script type="text/javascript" src="js/shadowbox-build-3.0rc1/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
language: 'en',
players: ['img'],
overlayColor: '#333333'
});
</script>
<style>
html,body
{
text-align:center;
background:#666666;
}
.thumbs
{
border: 3px solid #ffffff;
}
.thumbs:hover
{
border: 3px solid #333333;
}
</style>
</head>
<body>
<?php
require_once("../libs/phpFlickr/phpFlickr.php");
$f = new phpFlickr("yourKeyHere");
$setId = '72157617329815254';
$photos = $f->photosets_getPhotos($setId,NULL,NULL,9,17);
$i=0;
$maxCol=3;
foreach ($photos['photoset']['photo'] as $photo){
echo '<a rel="shadowbox" href="'. $f->buildPhotoURL($photo, 'medium').'">
<img class="thumbs" src="'.$f->buildPhotoURL($photo, 'square').'">
</a>';
$i++;
if($i==$maxCol){
$i=0;
echo "<br>";
}
}
?>
</body>
</html>
