@LadyC never!

Improving a Flickr Plugin with jQuery

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

Share This:
  • del.icio.us
  • Digg
  • Twitter
  • Facebook
  • StumbleUpon
  • Google Bookmarks
  • NewsVine
  • Technorati
  • Reddit
  • LinkedIn

RSS feed of comments for this entry

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

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

    Greetings

  3. 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!

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

  5. Nice plugin. Thank you.

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

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

  8. 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&lang=en-us&format=json&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;
		});
	});
});

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

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

    would be replaced with this 

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

    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.

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

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

  12. @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.

  13. @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&lang=en-us&format=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
if(i<=11){
$("").attr("src", item.media.m).appendTo("#FlickrImages ul")
.wrap('<a>')
.wrap("")
}
});
$('a[@rel*=lightbox]').lightBox();
});
});

  14. @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.

  15. @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&lang=en-us&format=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
if(i<=11){
$("").attr("src", item.media.m).appendTo("#FlickrImages ul")
.wrap('<a>')
.wrap("")
}
});
$('a[@rel*=lightbox]').lightBox();
});
});

  16. @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);

  17. @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.

  18. @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

  19. @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('')

  20. @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(‘‘)

  21. @richyp147-
    You cannot just paste in HTML code, you should encode the < symbol with &lt;

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

  22. @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.

  23. @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

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

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

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

    Rich

  27. Just mailed you, re a quote

    Rich

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

    Cheers
    Rich

    • 6.7.2008 at 2:31 am
    • #

    Skylog » Blog Archive » links for 2008-06-07

    • 2.12.2009 at 9:36 am
    • #

    Fixing a Twitter WordPress Plugin with jQuery | Moojaxee

Speak Your Mind

* Denotes Required Field

  4. To post code snippets, use <pre><code>YOUR CODE HERE</code></pre>
Me, Trevor Davis. My blue steel face…

Hi, I’m Trevor Davis

I’m a 25 year old Front-End Developer living in Arlington, VA. I work full-time at Viget Labs and freelance on the side.

I specialize in CSS, HTML, jQuery, WordPress & ExpressionEngine. See more of my work, and then hire me.

Recent Work

  • 4th District IBEW Health Fund
  • Employers Council on Flexible Compensation
  • Monica Davis
  • The National Christmas Tree
  • Matrix Group International
  • The MatriX Files
  • Wireless Career
  • George Washington Wired
  • Direct Selling 411
  • Makeup Bizz
  • InstallNET
  • National Park Foundation
See More of My Work

Asides

Recent Entries

Popular Entries

Recent Comments