Thumbnail Gallery with Flickr, Bootstrap, and Javascript

November 1, 2012

I recently created a thumbnail gallery of my latest Flickr photos using the Flickr feeds API, Twitter Bootstrap, and Javascript/jQuery.  There is no server side code for this solution, and the client side code is really simple.  To start, create a blank html page (I like to start with the HTML5 Boilerplate).  Make sure you include the Bootstrap css and jQuery.  I used the Thumbnails component of Bootstrap for the gallery layout.  Here’s the div to hold the thumbnails:

Here’s the javascript to fetch the photos and populate the div. For this example, I’m displaying the pdx group pool photos.