Flickr API 到 jQuery 的 html 画廊答案

【问题标题】：Flickr API to html gallery by jQueryFlickr API 到 jQuery 的 html 画廊
【发布时间】：2013-04-14 18:03:33
【问题描述】：

这是我第一次在网站上道歉，如果这是错误的论坛。

我正在尝试从我网站上的灯箱画廊的 flickr 集中提取图像。光廊需要照片编码如下：

<ul>
    <li data-type="media" data-url="FULL SIZE URL"></li>
    <li data-thumbnail-path="THUMBNAIL URL"></li>
</ul>

我想将照片插入我命名为<div id="test"><div> 的 div 中这是我在查阅 Flick API 常见问题并查看其他代码后制作的 javascript：

$(function () {

$.ajax({
    url: 'http://api.flickr.com/services/rest/',
    data: {
        format: 'json',
        method: 'flickr.photosets.getPhotos',
        api_key: 'MY KEY',
        photoset_id: 'THE SET I'M USING',
        per_page: '50'
    },
    dataType: 'jsonp',
    jsonp: 'jsoncallback'
}).done(function (data) {
    var gallery = $('#test'),
        url;
$.each(data.photoset.photo, function (index, photo) {
        url = 'http://farm' + photo.farm + '.static.flickr.com/' +
            photo.server + '/' + photo.id + '_' + photo.secret;
        $('<ul>')
            .append($('<li>').prop('data-url', url + '_b.jpg').prop('data-type', 'media'))
            .append($('<li>').prop('data-thumbnail-path', url + '_s.jpg'))
        .appendTo(gallery);
    }); 
});

目前，我将 javascript 放在我的 html 标头中，但运行页面时 div 为空。

我错过了什么？

谢谢！

更新 1：我错过了 js 代码末尾的 });。谢谢@dfsq 现在我们已经附加了部分工作，但是 flickr 数据仍然没有被传递给 li 道具。这是当前插入的内容的 sn-p

<ul>
  <li></li>
  <li></li>
</ul>

更新 2：通过将每个 .prop 更改为 .attr，剩余的问题已得到解决....

【问题讨论】：

控制台有错误吗？
@dfsq 是的！最后我错过了});。但是，问题仍然存在，现在没有错误。我在我的 js 上方和下方添加了$('<p>Test</p>').appendTo('#test');。现在 div 显示一个“测试”，仅此而已。

标签： jquery html json flickr

【解决方案1】：

修正后的js如下：

$(function () {

$.ajax({
    url: 'http://api.flickr.com/services/rest/',
    data: {
        format: 'json',
        method: 'flickr.photosets.getPhotos',
        api_key: 'MY KEY',
        photoset_id: 'THE SET I'M USING',
        per_page: '50'
    },
    dataType: 'jsonp',
    jsonp: 'jsoncallback'
}).done(function (data) {
    var gallery = $('#test'),
        url;
$.each(data.photoset.photo, function (index, photo) {
        url = 'http://farm' + photo.farm + '.static.flickr.com/' +
            photo.server + '/' + photo.id + '_' + photo.secret;
        $('<ul>')
            .append($('<li>').attr('data-url', url + '_b.jpg').attr('data-type', 'media'))
            .append($('<li>').attr('data-thumbnail-path', url + '_s.jpg'))
        .appendTo(gallery);
    }); 
  });
});

【讨论】：