How to use jQuery with a JSON Flickr feed to display photos

So today I needed to display photos from our Flickr Group without using php or asp.net. I have a WordPress widget that does this job nicely, but no PHP was allowed.

Thank goodness for jQuery! jQuery has a handy little function which allows us to load JSON data using an HTTP GET request, and then process the contents as an array. And with some natty CSS to square things up as a grid, I have nine random (ish) photos from our Flickr group displaying in a nice 3×3 grid.

See it in action.

The full commented code is at the bottom of this post, but let’s go through it bit by bit. Continue reading

FlickrBox Goes Live! Almost.

A new tab has appeared at the top of this page, which links through to FlickrBox (formerly the phpFlickr Widget).

It will be launched to no fanfare whatsoever next week, when I upload the widget to WordPress. Pending their most gracious approval, of course.

In the mean time you can head over and have a look at what it’s all about. In future posts I’ll even breakdown the code that has put the whole thing together.

phpFlickr Widget

You may have noticed a new widget in the sidebar called the phpFlickr Widget.

It’s a widget I have developed for WordPress which allows you to include your Flickr photos in your blog, and display them with the rather funky Slimbox tool. Click on one of the photos and see what I mean. Slimbox, as well as looking great, allows you to navigate back and forth if you hover your mouse over the top left and top right of the picture.

The widget itself has a number of configurable options which are easy to set up and change. At the moment they include:

  • API Key
  • API Secret
  • Set ID
  • Number of photos
  • Photos per row

Before I release the widget I’ll be adding some more options, including the Flickr username and an ability to style how the thumbnails are displayed. At the moment they are just 50px squares.

Stayed tuned for more phpFlickr fun.