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->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><htmllang='en'><head><metacharset='utf-8'/><title>Flickr Photo Gallery with Colorbox in jQuery</title></head><body><divid='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(){varconfig={rows:5,// total rowsrowHeight:150,// the height of each rowborderWidth:3,// the width of the bordershuffle:true,// shuffle the imagesmaxPages:3,// max flickr pages to loadloadOnScroll:true,// load more phots when scrollingcb_url:'url_o',// the link for colorboxparams:{method:'flickr.photos.search',// flickr api methodapi_key:'ad2e1cc1d51162a8ee4ee4b022a711f4',// your API keyper_page:100,// max 500page:1,// page to loadtags:'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.
The standard paragraphs Welcome to this demo page! Here, you’ll get an exclusive preview of our cutting-edge platform designed to revolutionise your digital experience. Our...