Please ignore my earlier question, I have sorted it now.
I was using my screen name instead of the user ID.

Thanks very much for the tutorial, it will prove very useful!

Kind regards
Iain

I really like the idea of this so I decided to give it a go despite knowing nothing at all about JS or API or STYLES or the internet in general. I just tried to create a blank page with the div layer showing the 6 images like you have as your footer but all I get is a blank page…

Any ideas from looking at my page what I might be doing wrong?

Many thanks,

Hope it’ll help.
Thanks

http://api.flickr.com/services/rest/?format=json&method=flickr.photos.search&api_key=1cc94fa73b96447769167da4390183e5
&user_id=28214005@N02&tags=architecture&per_page=10&jsoncallback=?

Contrast that with the JSON that is returned from the URL that I call into:

http://api.flickr.com/services/rest/?format=json&method=flickr.photos.search&api_key=13ee651e2a7464fb55ac71807a23b5ea
&user_id=70511402@N00&tags=justinspradlindotcom&per_page=25&jsoncallback=?

Lots of JSON with photo information is returned. I think once you get the correct JSON returning from Flickr everything will work for you. Let me know how it goes. Good luck!

It’s a little hard to answer your question without seeing your code, but here are a few possible tips:

1. Make sure that the data object is not null. Use an alert statement to print out its contents: alert(data)

2. Make sure your API key, url, and tag strings are all correct.

I’m trying to implement your script and get an error “data.photos” is undefined. And so I don’t get any photos. (My site is not published yet.) What can I do? Thanks in advance!

Thanks for the comment. You should get your own API key from flickr for interacting with your flickr account.

I’ve noticed that it can sometimes take about 10 – 15 minutes for the tagged images to become available to the API. So once you tag images in Flickr wait a little while before expecting to see the images to show up in your photostream.

If you want to add more than one flickr stream to a page you should just be able to add multiple DIVs with different IDs and use jquery to place the images in the appropriate place.

For example if you had a DIVs identified by the IDs car, boat, plane. You could grab those images from Flickr using tags of the same name then use jquery and the code about to append the photostreams to those divs:

$(carPhotoString).appendTo(“#car”);
$(boatPhotoString).appendTo(“#boat”);
$(planePhotoString).appendTo(“#plane”);

I hope this helps. Good luck!

As this is your plug-in should i be usinging your api key or do i need to apply for my own even though i did not develop this plugin?

I tried adding a tag to some of my photos, i used the tag golf in flickr and change the tag like to var tag = ‘golf’; but it’s not working as i thought it should, if i add the tag to the script it fails to load in any images at all.

Last question…. honest!! How do i go about adding more than one flickr stream to a page?

Thanks

Thanks for the heads up about the broken link. I’ve fixed it so you can now check out the source.

Just one quick note: I’ve noticed sometimes that it takes up to 10 minutes for the images I upload to flickr to be available via the API. Just something to keep in mind.

I think i’ve got it right

var refreshId = setInterval(function()
{
$(‘#flickr’).fadeOut(1500).load().fadeIn(1500);
}, 5000);

Also the link to you loading example (http://www.sixtysixeast.com/jwwl/content.html) doesn’t work this would be really useful to implement if the container div is set to refresh

Thanks

Thanks for the kind words.

I checked out your site. You can simply place a “span” element with an animated gif/loading text/whatever inside of your div with the id of “flickr”. Give this span an id of something like “loading”. Once the images are pulled back from Flickr (i.e. at the end of the $.getJSON method) you can use JQuery to remove the span element and then show your pictures using the following command:

$(“#loading”).remove();

Check out the source and jwwl.js JavaScript file on this page for an example:

http://www.sixtysixeast.com/jwwl/content.html