For a while, I have been using the flickrRSS WordPress plugin to show my recent flickr photos in the footer of my site. Since I have become more comfortable using jQuery, I thought I would use it to make the plugin better.

I created a demo page. to see what the markup generated from the plugin normally is. The markup is just an unordered list, and I have done some basic CSS so that it looks halfway decent.

Each photo just links to the original Flickr page with the photo on it. I kind of didn’t like that because if someone wanted to see the larger version, they would have to leave my site just to see it.

I Love My Birthday Present

Digging into the Flickr Photos

If we take a look at the square image of me hugging my new TV, we can see that it is 75x75. Now if we take a closer look at the filename 2543094667_2ddfec7c73_s.jpg, we see that there is a _s at the end. Let’s take a look at the other photo sizes there are:

The medium sized photo looks like a nice size to display. What if instead of linking the small square photos to their respective Flickr page, we open the medium sized photo in a lightbox.

Lightbox

The lightbox that I use is a hacked up version of the Facebox script. I modified it a little to use table-less markup and for the entire page to grey out. The lightbox is launched by setting the rel attribute equal to lightbox.

Another modification I would like to make is to enable the lightbox to work in sets. Kind of like the Lightbox 2 script, but that is for another day.

The reason I like the Facebox script is because you can also have inline content and content loaded via an AJAX call.

Tweaking the Flickr Markup

Since I do not want to modify the flickrRSS plugin to change the markup, I will just use jQuery to change the markup on body load.

So there are two things that I want to do:

  • Add rel="lightbox" to each link containing the Flickr photo
  • Change the href to link to the medium image instead of linking to the Flickr page

The Code

First, let’s add the rel="lightbox" attribute to each of the links that are descendants of ul#flickr on body load:

$(document).ready(function() {
 $('ul#flickr a').each(function() {
  $(this).attr('rel','lightbox'); 
 });
}); 

Next, let’s change the link to be the medium photo. We will do this by copying the source of the image, and then replacing _s.jpg with .jpg:

$(document).ready(function() {
 $('ul#flickr a').each(function() {
  $(this).attr('rel','lightbox'); 
  var imgSrc = $(this).children().attr('src');
  $(this).attr('href',imgSrc.replace('_s.jpg','.jpg'))
 });
}); 

Next, we just initiate the lightbox script by targeting links that have a rel attribute of lightbox:

$(document).ready(function() {
 $('ul#flickr a').each(function() {
  $(this).attr('rel','lightbox'); 
  var imgSrc = $(this).children().attr('src');
  $(this).attr('href',imgSrc.replace('_s.jpg','.jpg'))
 });

 $('a[rel*=lightbox]').facebox();
}); 

I have modified the first demo page to show this new functionality (although you can just look at my footer too).

It’s pretty cool how just a few lines of jQuery can drastically improve the user experience.