flickr API to html gallery by jQuery

这是我第一次在网站上道歉，如果这是在那里错了论坛。flickr API to html gallery by jQuery

我想从我的网站上的灯箱画廊的flickr设置图像。光库需要的照片编码方式如下：

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

我想插入照片在一个div我命名为<div id="test"><div>这是我的javascript我咨询弗里克API常见问题和寻找其他的代码后进行：

$(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道具。这里是什么正在插入

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

更新2片段：通过改变每个.prop到.attr剩下的问题已经解决了....

来源

2013-04-14 ethioDev

控制台中的任何错误？ – dfsq

@dfsq是的！我最后错过了一个'}）;'。但是，问题依然存在，现在没有任何错误。我添加了'$（'

测试

'）.appendTo（'＃test'）;'在我的js上方和下方。现在div显示一个“测试”，但就是这样。 – ethioDev

修正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); 
    }); 
    }); 
});

来源

2013-04-15 03:09:36 ethioDev

flickr API to html gallery by jQuery

回答

相关问题