Today's Most Popular Flickr Photos

What you need

• Obtain an API key from Flickr. More here.
• Install the phpFlickr library, which wraps the FlickrAPI and will be used to build our local proxy.
• Install the jQuery JavaScript library, we'll use it to call the local proxy and retrieve some images.

PHP Proxy

This PHP scripts serves as your local proxy and fetches data from Flickr. In this case it will return a bullet list of thumbnails, here is how that looks.

require_once("../lib/phpFlickr/phpFlickr.php"); $_secret = "ee893243401cf68a"; $_key = "50d1f8fbe8e5b19922aa6680cbf17063"; $_perPage = 54; $photosetid = "72157621779037549"; $extras = "path_alias"; $f = new phpFlickr($_key,$_secret); switch($_GET['type']) { case "recent": $photos = $f->photos_getRecent( $extras, $_perPage, 1 ); break; case "photoset": $photos = $f->photosets_getPhotos($photosetid, $extras, null, $_perPage); break; default: $photos = $f->interestingness_getList( null, $extras, $_perPage ); } if ($_GET['format']==='json') { getJSON(); } else { getHTML(); } function getJSON() { global $photos, $f; $output = array( 'total' => $photos['total'], 'perPage' => $photos['perpage'], 'pages' => $photos['pages'], 'page' => $photos['page'], 'photos' => array() ); foreach ((array)$photos['photo'] as $photo) { $node = array( 'thumb' => $f->buildPhotoURL($photo, "Square"), 'url' => 'http://www.flickr.com/photos/' . $photo['pathalias'] . '/' . $photo['id'] ); array_push($output['photos'],$node); } header('Content-type: text/plain'); echo json_encode($output); } function getHTML() { global $photos, $f; header('Content-type: text/html'); echo '<ul>'; foreach ((array)$photos['photo'] as $photo) { echo '<li><a href="http://www.flickr.com/photos/' . $photo['pathalias'] . '/' . $photo['id'] . '/" target="_blank"><img class="thumb" src="' . $f->buildPhotoURL($photo, "Square") . '" border="0" /></a></li>' ; } echo '</ul>'; }

Core JavaScript

Include the jQuery library before any other JavaScript code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Create an anymous function that will run once the DOM has been loaded.

$(document).ready(function(){ // grab a reference to the DIV where we'll insert the images var el = $('#photos'); // fire off an Ajax request to our local proxy $.get('./proxy.php',function(response){ // replace the contents of our DIV with the bullet list returned el.html(response); },'html'); // <-- tell jQuery to expect HTML content });

CSS

The list of thumbnails is then styled to look as it does above with using simple styling:

#photos .thumb { width: 75px; height: 75px; padding: .5em; border: 1px solid #d1852e; } #photos .thumb:hover { background-color: #ffea94; }

Got a question? Ask it here.