by sort-of-popular demand
I've now had a whopping three people tell me that they think the lightbox/flickr thing on this post is neat. So here's the script and the process for installing it, for anyone who'd like it (and is running their blog on a PHP-capable webhost).
- Get and install Lightbox2 on your site
- Do the same for PHPFlickr
- Get a Flickr API key
- Use it (and your username) to fill out this script. Place it somewhere that's accessible to code placed in your blog entries — your header file is a good bet, although you'll want to be sure its filename ends in .php. Really, anything ending in .php in your Movable Type templates section will probably be fine. Wordpress users should have an even easier time of it.
<?php define('FLICKR_USERNAME','your username'); define('FLICKR_API_KEY','your api key goes here'); // http://www.flickr.com/services/api/misc.api_keys.html require_once('/path/to/phpFlickr.php'); // http://www.phpflickr.com/ function makeLightboxPhotoset($photoset_id) { $flickr = new phpFlickr(FLICKR_API_KEY); $flickr->enableCache("fs", "/tmp", 300); if($photos = $flickr->photosets_getPhotos($photoset_id)) { print '<div class="lightbox-photoset" id="photoset-' . $photos['id'] . '">'; foreach($photos['photo'] as $photo) { $photo_description = $flickr->photos_getInfo($photo['id']); if(count($photo_description['urls']['url'])) { $photo_link = '<a href="' . $photo_description['urls']['url'][0]['_value'] . '">photo page (' . $photo_description['comments'] . ' comment' . (($photo_description['comments']==1) ? '' : 's') . ')</a> / '; } else { $photo_link = ''; } $title_html = '<div class="lightbox-caption"><span class="title">' . $photo['title'] . '</span><br/>' . $photo_description['description'] . '<div class="links">' . $photo_link . '<a href="http://www.flickr.com/photos/' . FLICKR_USERNAME . '/sets/' . $photos['id'] . '/">photoset page</a></div></div>'; $title_html = str_replace('<','<',$title_html); $title_html = str_replace('>','>',$title_html); $title_html = str_replace('"','"',$title_html); print '<a href="http://static.flickr.com/' . $photo['server'] . '/' . $photo['id'] . '_' . $photo['secret'] . '.jpg" rel="lightbox[' . $photoset_id . ']" title="' . $title_html . '"><img src="http://static.flickr.com/' . $photo['server'] . '/' . $photo['id'] . '_' . $photo['secret'] . '_s.jpg"/></a>'; } print '</div>'; } } ?> - You'll probably want to drop this CSS into your stylesheet, too:
.lightbox-photoset { width: 90%; margin: 0 auto; text-align: center; } .lightbox-photoset img { border: 1px solid #AAA; margin: 0 5px 5px 0; } .lightbox-caption { width: 100%; margin-bottom: 10px; font-weight: normal; } .lightbox-caption .title { font-weight: bold; } .lightbox-caption .links { margin-top: 1em; font-size: 10px; } - To use the function, get the photoset ID from your Flickr page. For example:
http://www.flickr.com/photos/sbma44/sets/72157594452559819/
Then call the function in your blog entry like so:<?php makeLightboxPhotoset('72157594452559819');?>
Again, the .php extension is important to ensure that your code is run. In this case, you'll want to make sure that the filenames of all the pages generated by your blogging software — the front page and individual entry archives — end in .php (or, in Wordpress, that you've installed one of the plugins that allow you to use PHP in the text of your entries).
That's it. Not the simplest thing in the world, but for anyone with any PHP knowledge it shouldn't be very difficult at all.





Comments
Cool site. Thanks!
http://geomapnw.ess.washington.edu/newsletter/themes/shared/js/xinha/functions/loan2.htm cash loans
Cool site. Thanks!
http://geomapnw.ess.washington.edu/newsletter/themes/shared/js/xinha/functions/loan2.htm cash loans