2013-04-14 3 views
0

это мой первый раз на сайте, чтобы извиниться, если это не тот форум.Flickr API в галерею html от 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 я сделал после консультаций с Flick 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> 

UPDATE 2: Изменяя каждый .prop.attr к остающейся проблемы была решено ....

+0

Любые ошибки в консоли? – dfsq

+0

@dfsq Да! Я пропустил '}),' в конце. Однако проблема сохраняется, и теперь ошибок нет. Я добавил '$ ('

Тест

') .appendTo ('# test');' выше и ниже моих js. Теперь div отображает один «тест», но это все. – ethioDev

ответ

0

скорректированного 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); 
    }); 
    }); 
}); 
Смежные вопросы