jQuery flickr widget

Wednesday, 25 November 2009



This tutorial shows you how to build a jQuery widget for your flickr photos or for your favourite flickr group.

Here is a look at the widget we will be building:

You can download the code for this widget here.

To build the widget we need to grab the jQuery hoverscroll plugin which allows us to do the nice scrolling action.

The rest is just a simple call to flickr's JSON API to retrieve the feed and another function to scale the images to size.

If you want to read about importing your flickr feed with jQuery and JSON I suggest you read this helpful post.

To begin with we simply grab our feed via JSON:

$("document").ready(function() {
     $.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=32142572@N00&lang=en-us&format=json&jsoncallback=?", function(data){
          $.each(data.items, function(i,item){
          $("<img/>").attr("src", item.media.m).appendTo("#images")
               .wrap("
<li><a href='" + item.link + "'></a></li>
");
          });
          
          $('#images').hoverscroll({
               vertical: true,
               width: 166,
               height: 400
          });

The main part of the call is the jQuery getJSON call, this calls the flickr API with the group ID of the group you want to display. You can easily get this URL and ID as it is almost identical to the RSS feed of the group. This feed is displayed at the bottom of the page, so it's a matter of clicking on the feed, grabbing the URL and changing the format over to JSON as above.

To view the different kinds of feed that flickr offers follow this link here.

The jQuery hoverscroll plugin is then called to build our lovely scrolling widget. You can view more detail about how the plugin works here.

The next part of the script just loops over the images and scales them accordingly.

$('#images img').each(function() {
               var maxWidth = 160; // Max width for the image
               var maxHeight = 160;    // Max height for the image
               var ratio = 0;  // Used for aspect ratio
               var width = $(this).width();    // Current image width
               var height = $(this).height();  // Current image height
      
               // Check if the current width is larger than the max
               if(width > maxWidth){
                    ratio = maxWidth / width;   // get ratio for scaling image
                    $(this).css("width", maxWidth); // Set new width
                    $(this).css("height", height * ratio);  // Scale height based on ratio
                    height = height * ratio;    // Reset height to match scaled image
                    width = width * ratio;    // Reset width to match scaled image
               }
      
               // Check if current height is larger than max
               if(height > maxHeight){
                    ratio = maxHeight / height; // get ratio for scaling image
                    $(this).css("height", maxHeight);   // Set new height
                    $(this).css("width", width * ratio);    // Scale width based on ratio
                    width = width * ratio;    // Reset width to match scaled image
               }
          }); 

I won't go into detail as to how the above works, it is just some math to scale the image to the provide constraint. Here I have set maxWidth and maxHeight to 160px.

The rest is just a bit of HTML and css.

Enjoy!
blog comments powered by Disqus