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!
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");
I noticed several typos in the above answer. Here is a that code with the typos corrected and a couple minor changes.
function getPicture(the_user_id, your_div_id){
var apiKey = "YOUR-API-KEY"; // replace this with your API key
// get an array of random photos
$.getJSON(
"http://api.flickr.com/services/rest/",
{
method: 'flickr.interestingness.getList',
api_key: apiKey,
format: 'json',
nojsoncallback: 1,
per_page: 10 // you can increase this to get a bigger array
},
function(data){
// if everything went good
if(data.stat == 'ok'){
// get a random id from the array
var photo = data.photos.photo[ Math.floor( Math.random() * data.photos.photo.length ) ];
// now call the flickr API and get the picture with a nice size
$.getJSON(
"http://api.flickr.com/services/rest/",
{
method: 'flickr.photos.getSizes',
api_key: apiKey,
photo_id: photo.id,
format: 'json',
nojsoncallback: 1
},
function(response){
if(response.stat == 'ok'){
var the_url = response.sizes.size[5].source;
$("#"+your_div_id).append("");
}
else{
console.log(" The request to get the picture was not good :\ ")
}
}
);
}
else{
console.log(" The request to get the array was not good :( ");
}
}
);
};
Here is an updated fiddle + example that allows you to fetch a random image by tag (I needed this and thought it might be helpful)
Full example:
function getPicture(tags, cb) {
var apiKey = "fa214b1215cd1a537018cfbdfa7fb9a6"; // replace this with your API key
// get an array of random photos
$.getJSON(
"https://api.flickr.com/services/rest/?jsoncallback=?", {
method: 'flickr.photos.search',
tags: tags,
api_key: apiKey,
format: 'json',
per_page: 10 // you can increase this to get a bigger array
},
function(data) {
// if everything went good
if (data.stat == 'ok') {
// get a random id from the array
var photo = data.photos.photo[Math.floor(Math.random() * data.photos.photo.length)];
// now call the flickr API and get the picture with a nice size
$.getJSON(
"https://api.flickr.com/services/rest/?jsoncallback=?", {
method: 'flickr.photos.getSizes',
api_key: apiKey,
photo_id: photo.id,
format: 'json'
},
function(response) {
if (response.stat == 'ok') {
var the_url = response.sizes.size[5].source;
cb(the_url);
} else {
console.log(" The request to get the picture was not good :\ ")
}
}
);
} else {
console.log(" The request to get the array was not good :( ");
}
}
);
};
Call the code like this:
getPicture('<your_tag>', function(url) {
$("#random").attr("src", url)
});
In the end I had to take a completely different approach. Turns out the Flickr badge API changed and added more flexibility whilst I was trying to figure out the answer to this question. It basically does what I need to now: http://www.flickr.com/badge.gne
You may want to pull bigger images, for that you need your API key from here . Then, you may call this function and thats it:
function getPicture(the_user_id, your_div_id){
var apiKey = "YOUR-API-KEY"; // replace this with your API key
// get an array of random photos
$.getJSON(
"http://api.flickr.com/services/rest/",
{
method: 'flickr.people.getPublicPhotos',
api_key: apiKey,
user_id: the_user_id,
format: 'json',
nojsoncallback: 1,
per_page: 10 // you can increase this to get a bigger array
},
function(data){
// if everything went good
if(data.stat == 'ok'){
// get a random id from the array
var photoId = data.photos.photo[ Math.floor( Math.random() * data.photos.photo.length ) ];
// now call the flickr API and get the picture with a nice size
$.getJSON(
"http://api.flickr.com/services/rest/",
{
method: 'flickr.photos.getSizes',
api_key: apiKey,
photo_id: photoId,
format: 'json',
nojsoncallback: 1
},
function(response){
if(response.stat == 'ok'){
var the_url = response.sizes.size[5].source;
$("#"+your_div_id).append('<img src="' + the_url + '" />');
}
else{
console.log(" The request to get the picture was not good :\ ")
}
}
);
}
else{
console.log(" The request to get the array was not good :( ");
}
}
);
};
来源：https://stackoverflow.com/questions/9739946/load-one-random-flickr-image-append-to-div