{"authorId":"1","title":"Improving a Flickr Plugin with jQuery","slug":"improving-a-flickr-plugin-with-jquery","postDate":1212713274,"expiryDate":null,"enabled":"1","fields":{"2":"<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=\"http:\/\/trevordavis.net\/#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>\n<!--more-->\n<p>I created a <a href=\"http:\/\/trevordavis.net\/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>\n<p>Each photo just links to the original Flickr page with the photo on it. I kind of didn&rsquo;t like that because if someone wanted to see the larger version, they would have to leave my site just to see it.<\/p>\n<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>\n<h2>Digging into the Flickr Photos<\/h2>\n<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&rsquo;s take a look at the other photo sizes there are:<\/p>\n<ul>\n<li><a href=\"http:\/\/farm3.static.flickr.com\/2123\/2543094667_2ddfec7c73_t.jpg\" rel=\"lightbox[set]\">Thumbnail<\/a>: _t.jpg<\/li>\n<li><a href=\"http:\/\/farm3.static.flickr.com\/2123\/2543094667_2ddfec7c73_m.jpg\" rel=\"lightbox[set]\">Small<\/a>: _m.jpg<\/li>\n<li><a href=\"http:\/\/farm3.static.flickr.com\/2123\/2543094667_2ddfec7c73.jpg\" rel=\"lightbox[set]\">Medium<\/a>: .jpg<\/li>\n<li><a href=\"http:\/\/farm3.static.flickr.com\/2123\/2543094667_2ddfec7c73_b.jpg\" rel=\"lightbox[set]\">Large<\/a>: _o.jpg<\/li>\n<\/ul>\n<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>\n\n<h2>Lightbox<\/h2>\n<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>\n<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>\n<p>The reason I like the Facebox script is because you can also have inline content and content loaded via an AJAX call.<\/p>\n\n<h2>Tweaking the Flickr Markup<\/h2>\n<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>\n<p>So there are two things that I want to do:<\/p>\n<ul>\n<li>Add <code>rel=\"lightbox\"<\/code> to each link containing the Flickr photo<\/li>\n<li>Change the <code>href<\/code> to link to the <strong>medium image<\/strong> instead of linking to the Flickr page<\/li>\n<\/ul>\n<h3>The Code<\/h3>\n<p>First, let&rsquo;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>\n<div class=\"codeblock\"><code>\n$(document).ready(function()&nbsp;&#123;<br \/>&nbsp;$('ul#flickr&nbsp;a').each(function()&nbsp;&#123;<br \/>&nbsp;&nbsp;$(this).attr('rel','lightbox');&nbsp;<br \/>&nbsp;&#125;);<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n\n<p>Next, let&rsquo;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>:\n<div class=\"codeblock\"><code>\n$(document).ready(function()&nbsp;&#123;<br \/>&nbsp;$('ul#flickr&nbsp;a').each(function()&nbsp;&#123;<br \/>&nbsp;&nbsp;$(this).attr('rel','lightbox');&nbsp;<br \/>&nbsp;&nbsp;var&nbsp;imgSrc&nbsp;=&nbsp;$(this).children().attr('src');<br \/>&nbsp;&nbsp;$(this).attr('href',imgSrc.replace('_s.jpg','.jpg'))<br \/>&nbsp;&#125;);<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n\n<p>Next, we just initiate the lightbox script by targeting links that have a rel attribute of <strong>lightbox<\/strong>:\n<div class=\"codeblock\"><code>\n$(document).ready(function()&nbsp;&#123;<br \/>&nbsp;$('ul#flickr&nbsp;a').each(function()&nbsp;&#123;<br \/>&nbsp;&nbsp;$(this).attr('rel','lightbox');&nbsp;<br \/>&nbsp;&nbsp;var&nbsp;imgSrc&nbsp;=&nbsp;$(this).children().attr('src');<br \/>&nbsp;&nbsp;$(this).attr('href',imgSrc.replace('_s.jpg','.jpg'))<br \/>&nbsp;&#125;);<br \/><br \/>&nbsp;$('a&#91;rel*=lightbox&#93;').facebox();<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n<p>I have <a href=\"http:\/\/trevordavis.net\/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=\"http:\/\/trevordavis.net\/#flickr\">my footer<\/a> too).<\/p>\n\n<p>It&rsquo;s pretty cool how just a few lines of jQuery can drastically improve the user experience.<\/p>","14":{"old_id":{}}}}