问题
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!
回答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");
回答2:
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 :( ");
}
}
);
};
回答3:
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)
http://jsfiddle.net/6gY83/4/
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)
});
回答4:
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
回答5:
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