Thumbnail Gallery with Flickr, Bootstrap, and Javascript

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:

<div class="row">
    <div class="span16">
        <ul class="thumbnails" id="my-photos">
        </ul>
    </div>
</div>

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 = $("<li>").attr("class", "span2");
                var a = $("<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 = $("<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.

4 thoughts on “Thumbnail Gallery with Flickr, Bootstrap, and Javascript”

  1. Is there a way to make the images pop up in a modal window instead of going to the flickr site?
    I haven’t really studied the flickr api
    If I figure it out, I’ll post a reply here with what I did
    PS
    Hey! I’m in Portland too! 🙂

  2. It’s hard to find your page in google. I found it on 22 spot, you
    should build quality backlinks , it will help you
    to increase traffic. I know how to help you,
    just search in google – k2 seo tricks

  3. I read a lot of interesting articles here. Probably you spend a lot
    of time writing, i know how to save you a lot of time, there is an online tool that creates readable, google friendly articles in seconds, just search in google
    – laranitas free content source

Leave a Reply

Your email address will not be published. Required fields are marked *

*