Facebook Галерея изображений на сайте (PHP/JSON)

Question

Я пытаюсь получить галерею facebook (https://www.facebook.com/media/set/?set=a.188384271935.125248.188249156935&type=3), в частности, для отображения на веб-сайте.

Все примеры JSON, которые я пробовал, кажутся устаревшими с нынешним API-интерфейсом facebook.

https://graphs.facebook.com/10151038651796936?fields=images подтягивает данные JSON, которые мне нужны. Но когда я подключу его к примерам, которые я нахожу, или даже примеры из API Facebook, они не будут загружаться. (используя JQuery 1.9, размещенную локально)

Это код, который я пытаюсь использовать, но я думаю, что он устарел, как и API-интерфейсы facebook.

 <script type="text/javascript"> 
      (function (gallery_id) { 
      var title = $('h2'), 
       viewer = $('#viewer'), 
       thumbs = $('#thumbs'); 

      // album info 
      $.getJSON('//graph.facebook.com/' + gallery_id + '?callback=?', function(json, status, xhr) { 
       title.html('<a href="' + json.link + '">' + json.name + '</a> from ' + json.from.name); 
      }); 

      // images 
      $.getJSON('//graph.facebook.com/' + gallery_id + '/photos?callback=?', function(json, status, xhr) { 
       var imgs = json.data; 

       viewer.attr('src', imgs[0].images[0].source) 

       for (var i = 0, l = imgs.length - 1; i < l; i++) { 
       $('<img src="' + imgs[i].images[3].source + '" data-fullsize="' + imgs[i].images[0].source + '">').appendTo(thumbs); 
       } 

       $('img', thumbs).bind('click', function(e) { 
       e.preventDefault(); 
       viewer.attr('src', $(this).attr('data-fullsize')); 
       }); 
      }); 
      })('188384271935'); // put the gallery ID here 

Что я хотел бы код, чтобы сделать, это быть в состоянии выбрать количество отображаемых снимков (последних), а для галереи ID, чтобы иметь возможность легко изменить.

Я довольно незнакомый с JSON, если бы вы могли показать пример рабочего фрагмента кода, который что-то делает в этих строках, я бы БОЛЬШО его оценил.

Answer 1

Ваш код отлично подходит для меня. Вы должны дважды проверить, что ваша библиотека jQuery действительно загружается и у вас есть элементы на странице с viewer и thumbs ID. viewer должен быть тегом img, а thumbs должен быть элементом уровня блока, например div.

Поскольку вы не используете jQuery(document).ready назвать это (по крайней мере, не из кода в комплект поставки), вы должны также убедиться, что этот сценарий тег включается после разметки для viewer и thumbs.

В качестве альтернативы, если вы используете imgs[i].images[6].source для своих миниатюр, они будут немного меньше.