Load one random flickr image & append to div

Question

I'm basically trying to load in one random flickr image taken from a specific user and specific set which then gets displayed within a div with the id of 'flickr-wrap'. I'm trying to manipulate this JSON code to do what I want but haven't a clue where to start. This code currently loads in lots of images (I just want one to load in) and uses tags (but I want user and sets instead), could anyone help me out?

 $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",{
    id: "51997044@N03",
    tagmode: "any", 
    format: "json" },
  function(data) {
    $("<img/>").attr({src: data.items[0].media.m.replace('_m.','.')}).appendTo("#flickr-wrap");
  });

EDIT

I've stopped the loop which is great and have now updated the above code to pull in the photo set.gne instead of the public.gne, and have slightly changed how I call in the photoset by removing some lines of code. Now all I need to do is pull in a random image from that set. Here's what ive got so far:

$.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=72157626230243906&nsid=51997044@N03&lang=en-us&format=json&jsoncallback=?",
  function(data) {
    $("<img/>").attr({src: data.items[0].media.m.replace('_m.','.')}).appendTo("#flickr-wrap");
  });

EDIT

Still haven't got the random thing to work yet. Most annoying. Could really use some help here. Desperate!

Answer 1

data.items is the array of your images, so just get the first one and don't iterate over the array.

Instead of

$.each(data.items, function(i,item){...}

do

$("<img/>").attr({src: data.items[0].media.m.replace('_m.','.')}).appendTo("#flickr-wrap");