我需要使用Miromannino Justified Gallery(http://miromannino.github.io/Justified-Gallery/),但我需要它来显示从Flickr中检索到的图像。
我使用Ajax通过API从Flickr中检索照片时获得了代码:
$.ajax({
url: "https://api.flickr.com/services/rest/",
data: {
method: "flickr.photos.search",
api_key: "671aab1520e2cb69e08dd36a5f40213b",
tags: "beach,fashion",
format: "json",
nojsoncallback: 1
},
success: function (response) {
$.each(response.photos.photo, function (index, value) {
$("#mygallery").append("<div><img src='http://farm" + value.farm + ".staticflickr.com/" + value.server + "/" + value.id + "_" + value.secret +".jpg'></div>");
})
}
});
但我只是不明白如何在Justified Gallery中添加。
答案 0 :(得分:0)
JustifiedGallery期望每个图片都包含在<a>
标记中。最后,您必须在结尾处致电.justifiedGallery()
。这是修改后的代码:
$.ajax({
url: "https://api.flickr.com/services/rest/",
data: {
method: "flickr.photos.search",
api_key: "671aab1520e2cb69e08dd36a5f40213b",
tags: "beach,fashion",
format: "json",
nojsoncallback: 1
},
success: function (response) {
$.each(response.photos.photo, function (index, value) {
console.log(value);
var url = 'http://farm' + value.farm + '.staticflickr.com/' + value.server + '/' + value.id + '_' + value.secret + '.jpg';
var a = $('<a>').attr({href: url});
var img = $('<img>').attr({src: url});
a.append(img);
$("#mygallery").append(a);
});
$('#mygallery').justifiedGallery();
}
});
此处它正在行动中:https://jsfiddle.net/tghw/raf1m6bL/