Использование getJSON с Flickr

Дата публикации:Май 8, 2011

Клиенту понравилось наше прошлое улучшение, и теперь он задумывается над тем, как разбавить тяжеловесный текст, размещенный на главной странице. Мы предложили ему добавить в сайдбар шесть последний изображений с сервиса Flickr, которые имеют пометку «wordpress theme». Они помогут сбалансировать контент. К счастью для нас, это действие не вызывает никаких проблем. Опять же, для ознакомления с API документацией Flickr вы всегда можете посетить сайт: http://www.flickr.com/services/api/.

Давайте начнем с того, что создадим пустое пространство в сайдбаре под изображения:

...
jQuery('.home).append('<div class="flickr">
  <h2>Latest Flickr:</h2></div>');
...

Мы воспользуемся photo stream методом для формирования URL:

...
var flickrURL = 'http://api.flickr.com/services/feeds/photos_public.
gne?tags=wordpress,themes&tagmode=all&format=json&jsoncallback=?';
...

Теперь мы можем вызвать getJSON:

...
  jQuery.getJSON(flickrURL, function(flickrImgs){
    jQuery('.flickr li').each(function(i){
        jQuery(this)
         .html('<img src='+flickrImgs.items[i].media.m+'
           width="100" height="100" />');
    });
  });
...

JSON строка, полученная от Flickr, возвращает массив, названный items, который содержит все типы данных. Обратите внимание, что это несколько отличается от получения текстовой информации из твитов. Добавляя media.m к URL миниатюр, мы можем создать простой список изображений. Выглядеть он будет следующим образом:

Поделиться

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.