Improving a Flickr Plugin with jQuery
Posted on June 5, 2008 in Tutorial | 11 Comments »
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.
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 75×75. 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
hrefto 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.
Richard HaylerJune 6, 2008 at 4:44 am
I love using Flickr myself but wanted to display the photos in a gallery on my own site. If anyone is interested I would be happy to make this script available and maybe someone could make a plugin for WP. You can checkout the full functionality on my website at http://www.hayler.com/photos/
The script uses the Flickr API, some PHP code and lightbox. Currently I have this running on PHP4.
PatrickJune 6, 2008 at 7:07 am
Thank you very much for this insightful little tutorial. This technique could come handy sometime.
Greetings
PatJune 6, 2008 at 9:16 am
Hey,
I’ve been looking for something like this for a long time now! Thanks so much.
There is one thing I noticed when I opened one of the photos into the lightbox box. For some reason, even though the picture doesn’t go anywhere near the bottom of my window, there is something that is causing a vertical scroll-bar to appear. Don’t know if there’s a “height:” issue somewhere?
Thanks!
TrevorJune 6, 2008 at 9:25 am
@Patrick-
Nice, glad is was helpful.
@Pat-
Yeah I need to do a little tweaking on the lightbox script. This is the line I need to fix:
It only needs to add the extra 10 pixels in IE 6 I believe. What browser were you using?
Skylog » Blog Archive » links for 2008-06-07June 7, 2008 at 2:31 am
[…] Improving a Flickr Plugin with jQuery (tags: jquery) […]
taylanJune 7, 2008 at 4:30 pm
Nice plugin. Thank you.
bluAugust 6, 2008 at 9:08 pm
This is just what I’m looking for, only I’m only getting started with jQery, so bare with me guys. I can’t seem to add this supernice function to my flickr feed ( I’m using This great way to pull your feed from flickr but can’t seem to figure out where to include this code to make it work. any ideas would be greatly appreciated!!
Blu
TrevorAugust 6, 2008 at 10:28 pm
@blu-
So you are trying to combine the two methods? Do you have a URL you can show so that we can see what you’ve got?
bluAugust 6, 2008 at 11:23 pm
Yeah! basically I got the flickr feed working, but instead of just linking to my flickr page I’m looking for a way to show the medium pics in a lightbox effect. it’s working now on the bottom left sidebar of THIS PAGE I took the linking off for now. I know it can work but like i said i’m just getting the hang of it.
Code for the flickr feed is :
TrevorAugust 7, 2008 at 12:00 am
@blu-
Ok, I would say the easiest thing to do would be to wrap the image with the link. So this:
would be replaced with this
That way, you will be ready to add in my code. Of course you will need to change the selector to be what you have. Make sure to add in my JavaScript after the JavaScript that you have pulling in the flickr feed. Of course, instead of using JavaScript to pull in your flickr feed, you can just use this WordPress plugin.
bluAugust 7, 2008 at 12:08 am
Thank you so much! I’ll give it a try and let you know how it works
Quote
“Of course, instead of using JavaScript to pull in your flickr feed, you can just use this WordPress plugin.”
Where’s the fun in that right???
Blu