Create a responsive photo grid web app

Using the flickr API, jQuery, AJAX, Masonry, and featherlight lightbox lib.

Preview the live demo, the results will look like image below…

Why am I doing this?

• I found that there was no clear documentation on handling the flickr.photosets.getPhotos method on a personal flickr album or albums for my particular use case.
• I wanted to share my findings with those who had or will have come across this annoying process.

** This tutorial is for those who have HTML, CSS, JavaScript, creating & handling AJAX requests, and jQuery knowledge. **

** Having some knowledge of the masonry library will definitely help you here and your future. **

** You have a flickr account. If not it's ok, I created an account specific for this tutorial, but it’s more fun with your own album. **

I will be using Desandro's masonry & imagesloaded library, jQuery for the Ajax call, and for DOM manipulation, flickr's API, and the featherlight library lightbox to display images in a lightbox when clicked, and ES5 syntax.

I will not be diving into detail regarding the structure of the HTML or CSS. They will remain relatively basic, rather our main focus is on piecing together the flickr api, the ajax request and then wiring that up to work with the masonry grid, and featherlight lightbox.

I will also be using c9.io, an amazing cloud IDE, you can use any text editor of your choice obviously, we won’t be installing any npms or anything heavy.

So let’s begin!

• I’ve included a start folder and a finish folder. You can either copy/paste it, type it all out, or just clone the repo, easy.
• There is also this folder that includes how to create a flickr api key.

We’re diving straight into the core, we have to piece together the flickrURL to be sent with our GET request in our getJSONData function.

// In our scripts.js file.
  
  function getJSONData() {
    var yourAPI_KEY ="8f29ca9d04e2badc2e07dc346663e0f9",
        yourPhotoset_ID = "72157685222990161";
    
    var flickrURL = "https://api.flickr.com/services/rest/" +
                    "?method=flickr.photosets.getPhotos" +
                    "&api_key=" + yourAPI_KEY +
                    "&photoset_id=" + yourPhotoset_ID +
                    "&privacy_filter=1" +
                    "&format=json&nojsoncallback=1";
   $.getJSON( flickrURL, successFn );
  }
 function successFn(result) {
   console.log(result);
   console.log("flickr request is a success, do a backflip");
 }
 function errorFn(xhr, status, strErr) {
   console.log(strErr);
 }
// "&privacy_filter=1" +  // 1 signifies all public photos.
// Obviously do NOT actually expose your personal API, this is just a tutorial and the account is setup so that we can use it for our learning purposes.

The results from the console.log should look like this:

console log results

You can also test the flickr.photosets.getPhotos call from your own album here and find your photoset ID there as well:

flickr.photosets.getPhotos

Let’s move on to handling the successful ajax call:

function successFn(result) {
  console.log(result);  // check that the results show up
  console.log("flickr images loaded, hurray! do a backflip");
  // grab the photo set title and inject it into the h1
  var photosetTitle = result.photoset.title;
  $("#photo-grid h1").html(photosetTitle);
  
  // we need to wrap all the content into the main grid class
  var $gridMasterClass = $("<div class='grid' />")
        .append("<div class='grid-sizer' />");
  // append it to our HTML id tag photo-grid
  $("#photo-grid").append($gridMasterClass);
  // we're going use the jQuery each function to handle 
  // each image that comes through from result.photoset.photo array
  $.each(result.photoset.photo, function(i, photo) {
     // this is the tricky part of constructing the src url 
     // together to actually have it working.
     // documentation here
     var originalSizeURL = "https://farm" + 
                            photo.farm +
                            ".static.flickr.com/" + 
                            photo.server + "/" + 
                            photo.id + "_" + 
                            photo.secret + ".jpg";
  
     // here we're creating an img tag, using the attr function to     
     // inject the src url from above, and then appending it to the    
     // master grid class I'm using jQuery's wrap function to wrap 
     // each img tag with grid-item class, then wrap the grid-item 
     // class with the an href for the featherlight lightbox. 
     $("<img>").attr("src", originalSizeURL)
        .appendTo(".grid")
        .wrap("<div class='grid-item' data-featherlight-gallery data-featherlight-filter='a' />")
        .wrap('<a href="' + originalSizeURL + '" data-featherlight="'+ originalSizeURL +'" class="gallery"></a>');
        
    // Use this logic if you have may photos and want to limit it 
    // remember that its zero based index, so 12 would be 13 photos.
    // if (i === 12) { 
    //   return false;
    // }
    });
    //finally initialize the masonry library
    initMasonry();
  }

And that’s it! there’s a bunch of things going on, please do let me know if this has helped you, or things I could have done better. Any feedback would be great! I have included a working codepen example as well:

Although this is a very basic photo app, you can add plenty of interesting features like overlaying text, animate the images, filters, create more pages with albums, etc.

I am working on a few other tutorials that involve Vuejs, more flickr api, some animation stuff, and will probably add some features to this on the next tutorial, and more DOM manipulation related coolness. Stay tuned.