Flickr Photo Gallery
Last week I updated my Blogger site to be responsive and optimised the page load time. Whilst doing those optimisation, I was looking for a simple photo gallery to display the photos from my Flickr photo stream. I've tried flickr sideshow, pictobrowser and slideflickr however I was not satisfied with them. I then started to study the Flickr API and tried to make a Flickr-like justified layout for my photography page. While trying to code the jQuery plugin, I found two great articles by Sam from Wackylabs.net and Miro Mannino. Miro explained how the layout could be done with a detailed illustrations but I decided to use Sam's algorithm to build my own jQuery plugin.

The plugin loads 5 rows when scrolling to the end of the page until photos all are loaded. If the configuration specifies more than one page, then it calls and loads next page until it reaches maximum pages. The current solution is not perfect and may affect the performance when it loads more than 800 photos. I will be working on optimising the performance to allow loading more photos.

This jQuery plugin also uses Colorbox to show larger version of photos when user clicks on the photo.

Okay, let me explain the configuration and how to use the plugin. However feel free to jump straight to the demo to view-source.

  • rows: the total/initial rows to show (default to 5)
  • rowHeight: the desired height of row (default to 150)
  • borderWidth: the border width of each photo (default to 5)
  • shuffle: shuffles the photo array when value is true (default to false)
  • maxPage: the maximum flickr pages to load (default to 3)
  • loadOnScroll: loads new photos when scrolling to page end (default to false)
  • params->method: the Flick API method (default to 'flickr.photos.search')
  • params->api_key: the API key which you can get it from here
  • params->user_id: your user id for fetching your photo stream. You can get it from here
  • params->per_page: the available photos per page from the results of API call (default to 100)
  • params->page: the start page (default to 1)
  • params->tags: the tag of photos to search (default to blank)

The following example uses "flickr.photos.search" method to load photos with tag "canon". It shuffles loaded photos to randomly display photos. If you want to display your photo stream, you should add "user_id" to params and change the method to "flickr.people.getPhotos".

<!DOCTYPE html>
<html lang='en'>
 <head>
 <meta charset='utf-8' />
  <title>Flickr Photo Gallery with Colorbox in jQuery</title>
 </head>
 <body>
  <div id='container'><!-- Nothing here --></div>

  <!-- Place your script above the end of </body> -->  
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
  <script type='text/javascript' src='flickrGallery.js'></script>
  <script>
   $(document).ready(function() {
    var config={
     rows: 5, // total rows
     rowHeight: 150, // the height of each row
     borderWidth: 3, // the width of the border
     shuffle: true, // shuffle the images
     maxPages: 3, // max flickr pages to load
     loadOnScroll:true, // load more phots when scrolling
     cb_url:'url_o', // the link for colorbox
     params:{
      method:  'flickr.photos.search', // flickr api method
      api_key: 'ad2e1cc1d51162a8ee4ee4b022a711f4',// your API key
      per_page: 100, // max 500
      page: 1, // page to load
      tags: 'canon' // search tag,
      extras: 'url_o' // add to existing params (url_n,url_c,url_m,url_z,owner_name)
     }
    };
    // start loading the gallery
    $('#container').flickrGallery(config);
   });
  </script>
 </body>
</html>
You can see it in action at below or from here. You can also read and study the plugin from here.




Well, if you enjoy this article, please leave a like or a plus and let me know your thoughts in the comments.