Thumbnail Gallery with Flickr, Bootstrap, and Javascript
hacking

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.

// see the list of feeds here - http://www.flickr.com/services/feeds/
// this is a handy tool to get people and group ids - http://idgettr.com/
$(document).ready(function () {
    var flickrFeedUrl = "http://api.flickr.com/services/feeds/groups_pool.gne?id=35468135854@N01&lang=en-us&jsoncallback=?";
    $.getJSON(flickrFeedUrl, { format: "json" },
        function (data) {
            $.each(data.items, function (i, item) {

                // build some elements and then append them accordingly
                var li = $("

  • ").attr("class", "span2"); var a = $("").attr("href", item.link).attr("class", "thumbnail").attr("title", item.title); // we want the larger square (150px) thumbnail instead of the smaller one (75px) var img = $("").attr("src", item.media.m.replace("_m.jpg", "_q.jpg")); img.appendTo(a); a.appendTo(li); $("#my-photos").append(li); // stop at 18 photos (i is 0 based) if (i == 17) return false; }); }); });
  • That’s it. This minimal amount of client side code produces a nice, responsive gallery of thumbnail links to Flickr photos.

    Edit 12/31/2012: I am now using mustache.js for templating, which is much more elegant than building the html via js.

    © 2017 knoone.info. All rights reserved.