<p>For a while, I have been using the <a href="http://wordpress.org/extend/plugins/flickr-rss/">flickrRSS</a> WordPress plugin to show my recent flickr photos in the <a href="//trevor-davis.com/#flickr">footer of my site</a>. Since I have become more comfortable using <a href="http://jquery.com/">jQuery</a>, I thought I would use it to make the plugin better.</p>

<p>I created a <a href="//trevor-davis.com/play/wordpress-flickr-plugin/">demo page</a>. 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.</p>
<p>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.</p>
<a href="http://farm3.static.flickr.com/2123/2543094667_2ddfec7c73_s.jpg"><img src="http://farm3.static.flickr.com/2123/2543094667_2ddfec7c73_s.jpg" alt="I Love My Birthday Present" class="imageRight frame" height="75" width="75" /></a>
<h2>Digging into the Flickr Photos</h2>
<p>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 <strong>2543094667_2ddfec7c73_s.jpg</strong>, we see that there is a _s at the end. Let’s take a look at the other photo sizes there are:</p>
<ul><li><a href="http://farm3.static.flickr.com/2123/2543094667_2ddfec7c73_t.jpg">Thumbnail</a>: _t.jpg</li>
<li><a href="http://farm3.static.flickr.com/2123/2543094667_2ddfec7c73_m.jpg">Small</a>: _m.jpg</li>
<li><a href="http://farm3.static.flickr.com/2123/2543094667_2ddfec7c73.jpg">Medium</a>: .jpg</li>
<li><a href="http://farm3.static.flickr.com/2123/2543094667_2ddfec7c73_b.jpg">Large</a>: _o.jpg</li>
</ul><p>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.</p>

<h2>Lightbox</h2>
<p>The lightbox that I use is a hacked up version of the <a href="http://famspam.com/facebox">Facebox script</a>. 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 <strong>rel</strong> attribute equal to <strong>lightbox</strong>.</p>
<p>Another modification I would like to make is to enable the lightbox to work in sets. Kind of like the <a href="http://www.lokeshdhakar.com/projects/lightbox2/">Lightbox 2</a> script, but that is for another day.</p>
<p>The reason I like the Facebox script is because you can also have inline content and content loaded via an AJAX call.</p>

<h2>Tweaking the Flickr Markup</h2>
<p>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.</p>
<p>So there are two things that I want to do:</p>
<ul><li>Add <code>rel="lightbox"</code> to each link containing the Flickr photo</li>
<li>Change the <code>href</code> to link to the <strong>medium image</strong> instead of linking to the Flickr page</li>
</ul><h3>The Code</h3>
<p>First, let’s add the <code>rel="lightbox"</code> attribute to each of the links that are descendants of <code>ul#flickr</code> on body load:</p>
<div class="codeblock"><code>
$(document).ready(function() {<br /> $('ul#flickr a').each(function() {<br />  $(this).attr('rel','lightbox'); <br /> });<br />}); 

</code></div>

<p>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 <strong>_s.jpg</strong> with <strong>.jpg</strong>:
</p><div class="codeblock"><code>
$(document).ready(function() {<br /> $('ul#flickr a').each(function() {<br />  $(this).attr('rel','lightbox'); <br />  var imgSrc = $(this).children().attr('src');<br />  $(this).attr('href',imgSrc.replace('_s.jpg','.jpg'))<br /> });<br />}); 

</code></div>

<p>Next, we just initiate the lightbox script by targeting links that have a rel attribute of <strong>lightbox</strong>:
</p><div class="codeblock"><code>
$(document).ready(function() {<br /> $('ul#flickr a').each(function() {<br />  $(this).attr('rel','lightbox'); <br />  var imgSrc = $(this).children().attr('src');<br />  $(this).attr('href',imgSrc.replace('_s.jpg','.jpg'))<br /> });<br /><br /> $('a[rel*=lightbox]').facebox();<br />}); 

</code></div>
<p>I have <a href="//trevor-davis.com/play/wordpress-flickr-plugin/enhancing-the-plugin-with-jquery/">modified the first demo page</a> to show this new functionality (although you can just look at <a href="//trevor-davis.com/#flickr">my footer</a> too).</p>

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