Flickr Lightbox

Flickr is a popular photo sharing site that supports the best and the brightest ideas that the modern web has to offer. Lightbox is a relatively popular script that provides a cool looking UI for viewing photos. Lightbox was so popular, in fact, that it has inspired innumerable spinoffs and variations. Here is a list of some of the various Lightbox clones.

Having mentioned that there are lots and lots of variations, one of the more popular ones is Lightbox 2 created by Lightbox's original author. Many of the photo-only variations of Lightbox are compatible with the original Lightbox HTML, so this is what we'll be creating. Feel free to tweak and adjust as the instructions for whichever 'box you're using dictates.

:!: This tutorial assumes that you're already familiar with using SimplePie, including looping through items. This is only sample code, and you should not create real pages using the (horrid) HTML generated by this example.

Notes

Apparently, Flickr now has a different “secret” ID for the original image, which we don't have access to in the feed. Because of that, this tutorial does not support the displaying of the “original” image.
The large version of the photo may or may not be available from Flickr. Flickr resizes and store photos based on the width/height of the image. If the original image that was uploaded was too small for a “large” version, then there won't be one.
There is TONS more functionality available from the Flickr API. If there's something you want to do that isn't part of this tutorial, take some time to go over the Flickr API docs. I would also recommend phpFlickr if you're looking for a PHP-based API for Flickr's web services.
This is actually pretty simple code. I've already written the upfront functions to do all the dirty work. All you have to do to use it is loop through each item in the Flickr feed and pass in some parameters (which in this example have already been done for you).

Compatibility

Tested with a standard Flickr Atom feed as of 23 August 2007.
Supported in SimplePie 1.0.
Code in this tutorial should be compatible with PHP 4.3 or newer, and should not use PHP short tags, in order to support the largest number of PHP installations.

Installation

Instructions

Create a new file called flickr_lightbox.inc and place it in the same directory as your simplepie.inc file.
On the SimplePie-enabled page you want to use this on, make sure you include it in the same way that you include simplepie.inc.

Source Code

<?php
class lightbox
{
	/**
	 * Function that removes double-quotes so they don't interfere with the HTML.
	 */
	function cleanup($s = null)
	{
		if (!$s) return false;
		else
		{
			return str_replace('"', '', $s);
		}
	}
 
	/**
	 * Function that returns the correctly sized photo URL.
	 */
	function photo($url, $size)
	{
		$url = explode('/', $url);
		$photo = array_pop($url);
 
		switch($size)
		{
			case 'square':
				$r = preg_replace('/(_(s|t|m|b))?\./i', '_s.', $photo);
				break;
			case 'thumb':
				$r = preg_replace('/(_(s|t|m|b))?\./i', '_t.', $photo);
				break;
			case 'small':
				$r = preg_replace('/(_(s|t|m|b))?\./i', '_m.', $photo);
				break;
			case 'large':
				$r = preg_replace('/(_(s|t|m|b))?\./i', '_b.', $photo);
				break;
			default: // Medium
				$r = preg_replace('/(_(s|t|m|b))?\./i', '.', $photo);
				break;
		}
 
		$url[] = $r;
		return implode('/', $url);
	}
 
	/**
	 * Function that looks through the description and finds the first image.
	 */
	function find_photo($data)
	{
		preg_match_all('/<img src="([^"]*)"([^>]*)>/i', $data, $m);
		return $m[1][0];
	}
}
?>

Example Code

<?php
require_once('simplepie.inc');
require_once('flickr_lightbox.inc');
 
/**
 * Set up SimplePie with all default values using shorthand syntax.
 */
$feed = new SimplePie('http://api.flickr.com/services/feeds/photos_public.gne?id=33495701@N00&lang=en-us&format=atom');
$feed->handle_content_type();
 
/**
 * What sizes should we use?
 * Choices: square, thumb, small, medium, large.
 */
$thumb = 'square';
$full = 'medium';
 
?><!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>
	<title>Flickr Lightbox</title>
 
	<!-- Lightbox 2 includes -->
	<script type="text/javascript" src="js/prototype.js"></script>
	<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
	<script type="text/javascript" src="js/lightbox.js"></script>
	<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
 
</head>
 
<body>
 
	<!-- Format the photos in a way that the Lightbox-clone scripts prefer. -->
	<?php
	foreach ($feed->get_items() as $item):
		// We should NOT use the enclosure URL, as this is the 'Original' size we mentioned had issues.
		// Parse the description for the <img>
		$url = lightbox::find_photo($item->get_description());
	?>
 
	<a href="<?php echo lightbox::photo($url, $full); ?>" title="<?php echo lightbox::cleanup($item->get_title()); ?>" rel="lightbox">
		<img src="<?php echo lightbox::photo($url, $thumb); ?>" alt="<?php echo lightbox::cleanup($item->get_title()); ?>" border="0" />
	</a>
 
	<?php endforeach; ?>
 
</body>
</html>

tutorial/flickr_lightbox.1187925892.txt.gz · Last modified: 2011/03/06 03:56 (external edit)