忘れそうなので、memoしました。
$(function() {
call_api();
});
//api取得
var apiKey = "number";
//url作成
var getUrl = function(photo, size) {
var url = "https://farm" + photo.farm + ".staticflickr.com/" +
photo.server + "/" + photo.id + "_" + photo.secret;
if (size) {
url += "_" + size;
}
url += ".jpg";
return url;
};
var parameters = $.param({
method: "flickr.photos.search",
api_key: apiKey,
text: "math",
per_page: 11,
sort: "interestingness-desc",
license: "4",
format: "json",
nojsoncallback: 1,
});
var flickr_url_1 = "url" + parameters;
//callback
//要素の自動生成
var callback = function(data) {
var ul = $("要素");
var md = $("要素");
for (var i = 0; i <= data.photos.photo.length-1; i++) {
var pict = data.photos.photo[i];
ul.append($("要素").append($("<img>", {
src: getUrl(pict, "q"),
width: 400,
height: 300,
}))
);
}
md.append(ul);
}
var call_api = function(data){
$.ajax({
url:flickr_url_1,
type: "POST",
dataType: "json",
success: function(data) {
callback(data);
}
});
}
フリッカーの画像のurl作成から、フリッカーの画像を欲しい分だけ生成し、
最後、DOM要素の生成を行なっています。
ご指摘、ぜひ伺いたいです。
では、参考までに