An unobtrusive interactive Flickr badge
Being bored yesterday night, I thought that it would be really cool to have a flickr badge that can be navigated (x pictures forward and backward), has a preview in middle size mode (lightbox style) and is generally nicely unobtrusive.
I cobbled together some code (dirty at times) and came up with this: “Unobtrusive Dynamic Flickr Badge”:http://icant.co.uk/sandbox/fjb/.
What it does is turn a simple link to your Flickr stream with a certain ID into the badge, which means that users without JavaScript can still reach your images and you don’t need a server component to pull the images.
And guess what, it is not even Ajax!
Tell me what you think, and I may find some more time to spice it up with the YUI and make it cleaner.
August 18th, 2006 at 9:50 am
Leave a Reply [...]
August 18th, 2006 at 8:01 pm
great script!
is it me or it dont work if prototype is loaded?
thanks for your help
August 18th, 2006 at 10:32 pm
August 19th, 2006 at 3:55 am
Wow! I felt like dragging and moving the little window :D Thanks for sharing the source. I think this could also work well with Lightbox.js.
August 19th, 2006 at 3:56 am
BTW, I posted about your book contest on my site, link at http://www.healthynerd.com/2006/08/18/win-books-chris-heilmann-contest/
:D Congratulations on the book project! :D
August 19th, 2006 at 10:15 am
Neat idea! I have an idea about implementing this on a blog but is it possible to display only one set of photos? Thanks
August 19th, 2006 at 11:42 am
@Mathieu: No idea, maybe there is a global name in prototype that overwrites one of this script?
@Rod: That applies to any HTML format. I might give it a go and make it so that you can add several in a next version, also to add a search box.
@healthynerd: I was thinking about using the YUI panel for this, but I didn’t want to make it too heavy. Actually the functionality is the same as lightbox now, I just didn’t add a cover of the whole document as that annoys me terribly. You can do that in CSS though.
@Clive: You mean in several posts with different people’s streams?
August 19th, 2006 at 12:11 pm
No, I meant one person’s photostream but only one photoset. For example, I would probably not want to display some photosets in my company blog (even though I am a freelancer!)
August 19th, 2006 at 6:40 pm
Neat idea, but I see one drawback – you can’t limit the photos on each page to just a set.
For example, I was testing it out to see if I could show different sketchbooks on different pages in this manner, but with the setup you can only show ALL of your photos in the photostream at once, regardless of sets.
Is there any way to work around this?
August 19th, 2006 at 7:17 pm
Great little script. I am currently having a conflict somewhere, which is understandable, since im a little over board on the JS right now.
(i tried to mention what im using, here, but w/ all the links, you think im spam, so here:
http://msusof.org/js-block.htm is explaination of what might be conflicting.)
If i link yr script in at the top of that list, nothing happens at all… If i put it at the bottom, it hangs @ the “loading images” step.
Hmmmmm. Any ideas? great script, reguardless.
August 21st, 2006 at 3:07 am
Like mathieue said, your script does not work with the prototype.js library. Any suggestions on this? Would be nice if we could use this badge with something so popular as Lightbox. Just my 2 cents. Not to sound unappreciative, I think you made a great little script, I just think it would be even better if it could work with something like Lightbox. Great job on the badge anyways, though.
August 21st, 2006 at 8:00 am
Can you send me a URL where prototype and the badge interfere? I included prototype to test and I get an “illegal XML error in line 1″, of prototype but the badge still works fine.
As to your lightbox problem, read my earlier remark, the badge does what lighbox does when you click the image, I just don’t like the fading out of the screen as it hurts my eyes on this laptop. You can tweak the CSS any way you want to though.
The idea was to keep this as small as possible, I don’t really feel like adding another 50k and I don’t think people should either.
That said, I will make a YUI version using the panel component that will allow dragging of the big picture.
August 24th, 2006 at 3:30 pm
Great script!
I really, really need to display my photos vertically instead of horizontally.
What changes would need to be made?
August 29th, 2006 at 10:46 pm
Hiya! Been looking for a script like this for such a long time, and it’s almost perfect for my needs!
I modified the .js so that I could pull out by tag, which will do instead of pulling out by set, but I can only use the script once on a page. I would love it it if was able to put multiple feeds of images on a page, to create different galleries. Is this possible?
Regardless, thanks for the great work.
October 7th, 2006 at 6:56 am
Any tips on how to modify the .js like Martin did to pull out images by tag? I’d love to try that. Thanks!
October 7th, 2006 at 9:17 am
Gaile you need to modify the code a bit. First of all, link to a tagged page:
http://www.flickr.com/photos/tags/koalas
Then replace:
var furl=fjb.srcLink.href.replace(/.*photos//,'');
var url='http://flickr.com/services/feeds/photos_public.gne?id=' + furl + '&format=json';
with
var furl=fjb.srcLink.href.replace(/.*tags//,'');
var url='http://flickr.com/services/feeds/photos_public.gne?tags=' + furl + '&format=json';
I’ll do a version that automatically detects that.
November 7th, 2006 at 5:38 am
Great script! I just have one question – it seems to be only displaying 20 photos. Is this normal, and is there a way to get around this?
Thanks!
November 7th, 2006 at 6:25 am
Is the script limited to displaying 20 images?
Is there a way to get it to go through all of the images associated with the ID?
November 18th, 2006 at 9:16 am
First, great script. Did exactly what I wanted. Nice work.
@Chris and @John – it seems to just scrape the page for images, versus generating links to all images within a photostream. I haven’t picked apart the code to verify this though.
November 22nd, 2006 at 3:26 pm
Absolutely great work. I want to build photo gallery using this. Can i have little bigger images then this ?
I would be nice since many people use some standalone work to have images on their own website. I can put flickr logo on it if its required for larger image. Please help me…!!
November 29th, 2006 at 11:37 pm
Thanks for the script, Chris, I think your work is wonderful and I have it running properly on our test site. However, I’m trying to get it to work with a group rather than a single user’s photos — is the script easily modified to do that? If I don’t hear from you, I’ll try to find the answer on my own. Thanks again!
December 11th, 2006 at 6:44 pm
i tried to replace the furl=fjb.srcLink.href.replace(/.*photos\//,”);
with
furl=fjb.srcLink.href.replace(/.*tags\//,”);
but it just displays random undefined images.
any ideas?
December 11th, 2006 at 6:45 pm
i tired to replace the *photos w/ *tags but it just displays random images not defined by the tag i set.
any ideas?
December 13th, 2006 at 5:06 pm
This script is awesome! What about changing it so when I click on the image it opens the flickr image the same as the flickr text link below the image? How would I go about doing that?
January 3rd, 2007 at 12:20 pm
Wow this is exactly what I need. I tried it defined by the tag I set but also just get random images… from anyone at Flickr.
I also would like a vertical image list, preferably in two vertical rows with three images in each row. That would fit perfect on my page in a 200 pixels side bar.
Edit: Yes, this is why I kept all the look and feel in the CSS, so go and change it to your needs.
January 17th, 2007 at 7:23 am
I must be the only person this is happening to but I can’t get any of these flickr badges to work in Firefox. Does anyone else have this problem? Does anyone know why?
February 4th, 2007 at 1:16 pm
anyway i can have this simply pull up a set within my user id.. i dont want to display all of my pics
February 6th, 2007 at 2:41 pm
Really nice code!
Just wondering if you could integrate this with Lightbox?
April 11th, 2007 at 2:34 pm
This is a great little script. Wish I could get it to stop conflicting with prototype.js though, As I am using it for other parts of my site.
April 11th, 2007 at 3:36 pm
Antony, this must be prototype then. As far as I remember this script doesn’t use any global variables. Do you have a url where we can see the clash?
May 2nd, 2007 at 11:58 pm
Thanks for the script! However I am only getting a link to my flickr page. I inserted the java script line. Do you know what the problem is?
June 10th, 2007 at 10:50 pm
I seem to be stuck at “loading images…”
how do I fix this??
June 10th, 2007 at 10:55 pm
Oh, nevermind, I read a comment about prototype.js and lightbox, so I deactivated it and now it works perfect! Amazing!!! I wish they can work together though.
Anyway, the current css works real well with my current layout.. soooo happy!
THANKS FOR THE GREAT SCRIPT!!!!
Love it!!
July 9th, 2007 at 2:58 am
This is great. Is it possible to display a set of photos?
December 1st, 2007 at 1:36 am
Hey, love the badge. I’m using v1 over v2 for simplicity sake.
Anyway, how easy would it be to modify the .js file, so that when you click the thumbnail, instead of popping up the larger preview window, it populates a with the url to the picture?
I’m good with HTML, but quite a rookie with javascript.
Thanks
Luke
December 8th, 2007 at 9:14 am
I got this to work for my group pool by taking Chris’s response to Gaile:
var furl=fjb.srcLink.href.replace(/.*tags//,”);
var url=’http://flickr.com/services/feeds/photos_public.gne?tags=’ + furl + ‘&format=json’;
And instead changing it to:
var furl=fjb.srcLink.href.replace(/.*groups//,”);
var url=’http://flickr.com/services/feeds/groups_pool.gne?id=’furl‘&format=json’;
——–
The “photos_public” was causing it to just show a random group of photos from all users.
Thanks for this script!!!
January 12th, 2008 at 1:50 pm
It is weird that I run this on localhost perfect, but not on the real host.
Firebug indicates that
obj.items[i].description has no properties fjb.js Line 16
You can check it on my site.
February 7th, 2008 at 10:31 am
the flaw which stops it working with other javascript libraries like prototype is in the line
obj.items[i].description.match(/src="([^&]*)"/)1;
If you preceed this with a call to check that description is not null before trying to match something in it, it’ll work with prototype.
if (obj.items[i].description)
It would be nice if you provided an unpacked version of the script for those who can turn on mod_gzip.
April 3rd, 2008 at 10:08 pm
This is exactly what I have been looking for. Thanks!
August 19th, 2008 at 1:00 am
I looked around for a solution as simple as this for a while. Nice work, and I applaud you for “supporting” your work. Good man.
FYI: I made this distribution of the badge: http://acadiavillas.com/villa-plan-1852.html
I needed to make it work with Tags, as mentioned earlier, and I also needed to restrict to my own set of pictures. So, based on your earlier post, I changed:
var url=’http://flickr.com/services/feeds/photos_public.gne?tags=’ + furl + ‘&format=json’;
to
var url=’http://flickr.com/services/feeds/photos_public.gne?tags=’ + furl + ‘&id=&format=json’;
December 28th, 2008 at 4:16 am
I’ve been using your script on a website (http://friendsofthebluehills.org/) for a while now – love it! Except, within the last day or so, it stopped working, just says “loading images”. I noticed your pages seem to be doing the same thing. I see no announcement that Flickr’s feed changed, and I can load “http://flickr.com/services/feeds/groups_pool.gne?id=MYGROUPID” no problem and see our group’s feed. Any insight?
July 6th, 2009 at 10:39 pm
Hello Chris. I am hoping to use this on my library’s website, but I can’t seem to get it working–I just get a link to our Flickr account (“Loading Images. . .”). I’m not terribly well-versed in Javascript, so any help you can offer would be appreciated. I’m currently testing the script on our current website, but we will be switching to a new site using Drupal in the very near future. Thanks!
July 7th, 2009 at 5:56 pm
And just one other thing–Javascript is available on our site, and other Javascript badges I’ve tested have worked fine, so I’m not at all sure why this one is giving me problems.
October 18th, 2009 at 4:31 pm
Great badge. Needed just one set and don’t have the js skillz to parse the below url to create the furl variable and to generate another variable for the set.
So, I went to the set’s page, found the feed link. Copied it to my clipboard, pasted it in a new window (but don’t hit enter). Deleted the “api.” from the front of the url and removed the “&lang=en-us” from the end. Then, in the fjb.js, replaced the url variable:
var url=’http://flickr.com/services/feeds/photos_public.gne?id=’furl‘&format=json’
with my new url of the set feed and adding “&format-json” to the end:
http://www.flickr.com/services/feeds/photoset.gne?set=72157607969215722&nsid=83125219@N00&format=json
Works like a charm! :D
Just on question Chris, if I was to do this the proper way, how can I take this url:
http://www.flickr.com/photos/83125219@N00/sets/72157607969215722/
and do the replace function on it to get the two variables (“furl” & “fset”) to then place into the url variable? Thanks for the help, the skillz and the time.
Rick