Improving a Flickr Plugin with jQuery

Published: 06.05.2008
Categories: JavaScript & Tutorial
Comments: 30

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 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:

Thumbnail: _t.jpg
Small: _m.jpg
Medium: .jpg
Large: _o.jpg

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.

30 Comments

Richard Hayler

06.06.2008

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.

Patrick

06.06.2008

Thank you very much for this insightful little tutorial. This technique could come handy sometime.

Greetings

Pat

06.06.2008

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!

Trevor

06.06.2008

@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:


$('#overlay').css('height',arrayPageSize[1]+10);

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.07.2008

[...] Improving a Flickr Plugin with jQuery (tags: jquery) [...]

taylan

06.07.2008

Nice plugin. Thank you.

blu

08.06.2008

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

Trevor

08.06.2008

@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?

blu

08.07.2008

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 :

$(function(){
 $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?ids=1384346@N02&amp;lang=en-us&amp;format=json&amp;jsoncallback=?", function(data){
  $.each(data.items, function(index, item){
   $("<img/>").attr("src", item.media.m).addClass("thumb").appendTo(".flickr .inside").wrap("<div class='flickr-thumb' />"); 
   if ( index == 7 ) return false; 
  });          
 });  
}); 

Trevor

08.07.2008

@blu-
Ok, I would say the easiest thing to do would be to wrap the image with the link. So this:


<strong>wrap("<div class='flickr-thumb' />")</strong>

would be replaced with this

<strong>wrap('<a href="'+item.link+'" rel="lightbox"/>').wrap("<div class='flickr-thumb' />")</strong> 

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.

blu

08.07.2008

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

Henry

09.02.2008

Great work on this.

Where did you go to “I modified it a little to use table-less markup and for the entire page to grey out.”

I like the Facebox script buy I need to grey out the page as well.

Trevor

09.02.2008

@Henry-
Basically you just want to append an empty div to the body, and give it an opacity:

$('body').append('<div id="overlay"></div>')
$('#overlay').css('opacity','0.5'); 

Then you will have to add in some CSS to make sure it fills the entire window, has a background color, and is positioned appropriately.

Fixing a Twitter WordPress Plugin with jQuery | Mo

02.12.2009

[...] That’s it. This is just another example of how I have used jQuery to improve a WordPress plugin on my site. [...]

richyp147

06.23.2009

@Trevor -
Hi, I have just implemented your excellent tutorial and added lightbox as well, I have it all working BUT was wondering whether it is possible to pull in flickr picture title and description to the lightbox white area?

This is the code I have implemented so far… Hope you can help

$(document).ready(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=39724364@N04&amp;lang=en-us&amp;format=json&amp;jsoncallback=?", function(data){
$.each(data.items, function(i,item){
if(i<=11){
$(&quot;").attr("src", item.media.m).appendTo("#FlickrImages ul")
.wrap('<a>')
.wrap("")
}
});
$('a[@rel*=lightbox]').lightBox();
});
}); 

Trevor

06.23.2009

@richyp147-
The title attribute of the link is what is pulled into the lightbox caption.

So if you just include the title and description from the JSON call as the title attribute, you should be good.

richyp147

06.23.2009

@Trevor -

Sorry to be a pain but could you show me how in the code below… I’m still a newbe on this and it took me long enough to figure this out.

$(document).ready(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=39724364@N04&amp;lang=en-us&amp;format=json&amp;jsoncallback=?", function(data){
$.each(data.items, function(i,item){
if(i<=11){
$(&quot;").attr("src", item.media.m).appendTo("#FlickrImages ul")
.wrap('<a>')
.wrap("")
}
});
$('a[@rel*=lightbox]').lightBox();
});
}); 

richyp147

06.23.2009

@Trevor -

I thought these might work, but I havetried them everywhere and I can’t get it going…

$(”#title”).html(data.title);
$(”#description”).html(data.description);

Trevor

06.23.2009

@richyp147-
Within your each statement, you want to access item.title and item.description. Then, you will want to concatenate those strings and add them as a title attribute to each individual item.

richyp147

06.24.2009

@Trevor -

Hi Trevor, Thanks for your help on this, ok so I have tried to add item.title and item.description to the each statement but all it gives me is an error… Help LOL

richyp147

06.24.2009

@Trevor -

Ok I have the title pulled in now, but as far as I can gather there is no tag in lightbox that supports the description all that’s available is:

.wrap(’<a>’)

richyp147

06.24.2009

@Trevor -

Sorry having trouble adding code here with: pre>YOUR CODE HERE

Meant to say all that is supported is the title attribure in lightbox, my implemented code is:

.wrap(’<a>’)

Trevor

06.24.2009

@richyp147-
You cannot just paste in HTML code, you should encode the < symbol with <

You will need to concatenate the item.title and item.description strings into one string and add that as the title attribute.

calvin

07.16.2009

@Richard Hayler-

Hi Richard:

Yes, could you please share the full html and php code with me? I would like to implemented a full gallery on my site as well.

Richard Hayler

07.19.2009

@calvin-

Hi Calvin:
Yes, will do - I’m actually in the process of updating the script so it is more compatible with PHP 5 so will send it over as soon as it’s done - not long to go now!.

Cheers
Rich

richyp147

08.04.2009

Hi Trevor,

I have just sent you an email, hope you have time to answer as I’m quite stuck re the item.description flickr pull for lightbox.

Richard

richyp147

08.04.2009

Hi thanks for the email, just sent you another to explain more of what I’m up to here.

If it helps and I can get it to work like I explain then I’m happy to give the code over and any users on this blog can have it

Rich

richyp147

08.04.2009

Thanks for all the advice, not sure what to do now, bit stuck

Rich

richyp147

08.04.2009

Just mailed you, re a quote

Rich

richyp147

09.16.2009

Hi Trevor sorry to hassle you but I sent you a personal email about a work quote and some basic help.

Cheers
Rich
——-

Improving a Flickr Plugin with jQuery

Digging into the Flickr Photos

Lightbox

Tweaking the Flickr Markup

The Code

Categories

Recent Articles

Share this article:

30 Comments

Richard Hayler

Patrick

Pat

Trevor

Skylog » Blog Archive » links for 2008

taylan

blu

Trevor

blu

Trevor

blu

Henry

Trevor

Fixing a Twitter WordPress Plugin with jQuery | Mo

richyp147

Trevor

richyp147

richyp147

Trevor

richyp147

richyp147

richyp147

Trevor

calvin

Richard Hayler

richyp147

richyp147

richyp147

richyp147

richyp147

What do you have to say?

About this Site

From Twitter

Bookmarks

Email Newsletter Design Contract

Which loads faster?

jQuery Fundamentals

10 Things I Learned from the jQuery Source

Photos