Comments on: Improving a Flickr Plugin with jQuery

By: Trevor

Trevor — Tue, 02 Sep 2008 18:02:04 +0000

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

By: Henry

Henry — Tue, 02 Sep 2008 17:40:11 +0000

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.

By: blu

blu — Thu, 07 Aug 2008 04:08:08 +0000

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

By: Trevor

Trevor — Thu, 07 Aug 2008 04:00:53 +0000

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

By: blu

blu — Thu, 07 Aug 2008 03:23:01 +0000

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; 
		});			  					
	});		
});

By: Trevor

Trevor — Thu, 07 Aug 2008 02:28:51 +0000

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

By: blu

blu — Thu, 07 Aug 2008 01:08:32 +0000

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

By: taylan

taylan — Sat, 07 Jun 2008 20:30:53 +0000

Nice plugin. Thank you.

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

Skylog » Blog Archive » links for 2008-06-07 — Sat, 07 Jun 2008 06:31:07 +0000

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

By: Trevor

Trevor — Fri, 06 Jun 2008 13:25:42 +0000

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

By: Pat

Pat — Fri, 06 Jun 2008 13:16:08 +0000

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!

By: Patrick

Patrick — Fri, 06 Jun 2008 11:07:52 +0000

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

Greetings

By: Richard Hayler

Richard Hayler — Fri, 06 Jun 2008 08:44:06 +0000

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.