单击按钮从 instagram api 检索更多照片

Question

我正在构建一个从某个tag name 检索 Instagram 图片的基本应用程序。我正在使用instagram-api-php 存储库。到目前为止，一切都很好。我在尝试加载更多与 tag name 相关的图片时遇到问题。我正在使用next_max_id，如instagram api pagination 中所述。我在页面中放置了一个button 并分配了next_max_id 来加载其余的照片。但没有照片正在加载。如何在单击按钮时加载更多照片？我按照Github 中的例子

index.php

<script>
    $(document).ready(function() {
      $('#more').click(function() {
        var tag   = $(this).data('tag'),
            maxid = $(this).data('maxid');

        $.ajax({
          type: 'GET',
          url: 'ajax.php',
          data: {
            tag: tag,
            max_id: maxid
          },
          dataType: 'json',
          cache: false,
          success: function(data) {
            // Output data
            $.each(data.images, function(i, src) {
              $('ul#photos').append('<li><img src="' + src + '"></li>');
            });

            // Store new maxid
            $('#more').data('maxid', data.next_id);
          }
        });
      });
    });
  </script>

<?php
  /**
   * Instagram PHP API
   */

    require_once 'Instagram.php';


    // Initialize class with client_id
    // Register at http://instagram.com/developer/ and replace client_id with your own
    $instagram = new Instagram('API KEY');

    // $geo = $instagram->searchMedia(56.8770413, 14.8092744);

    $tag = 'sweden';

    // Get recently tagged media
    $media = $instagram->getTagMedia($tag);

    // Display first results in a <ul>
    echo '<ul id="photos">';

    foreach ($media->data as $data) 
    {
        echo '<li><img src="'.$data->images->thumbnail->url.'"></li>';
    }
    echo '</ul>';

    // Show 'load more' button
    echo '<br><button id="more" name="max_id" data-maxid="'.$media->pagination->next_max_id.'" data-tag="'.$tag.'">Load more ...</button>';
?>

ajax.php

<?php
    /**
     * Instagram PHP API
     */
      set_include_path("../src/" . PATH_SEPARATOR . get_include_path());
      require_once 'Instagram.php';
      use MetzWeb\Instagram\Instagram;

      // Initialize class for public requests
      $instagram = new Instagram('API KEY');

      // Receive AJAX request and create call object
      $tag = $_GET['tag'];
      $maxID = $_GET['max_id'];
      $clientID = $instagram->getApiKey();

      $call = new stdClass();
      $call->pagination->next_max_id = $maxID;
      $call->pagination->next_url = "https://api.instagram.com/v1/tags/{$tag}/media/recent?client_id={$clientID}&max_tag_id={$maxID}";

      // Receive new data
      $media = $instagram->getTagMedia($tag,$auth=false,array('max_tag_id'=>$maxID));

      // Collect everything for json output
      $images = array();
      foreach ($media->data as $data) {
        $images[] = $data->images->thumbnail->url;
      }

      echo json_encode(array(
        'next_id' => $media->pagination->next_max_id,
        'images'  => $images
      ));
?>

Answer 1

改变

$.each(data.images, function(i, src) {
  $('ul#photos').append('<li><img src="' + src + '"></li>');
});

到

$.each(data.images, function(i, img) {
  $('ul#photos').append('<li><img src="' + img.standard_resolution.url + '"></li>');
});

不是 100% 确定这是正确的属性名称，但就目前而言，您正在循环遍历图像对象数组，将每个图像对象设置为 src，然后尝试使用 src 作为图像源，而实际上它是图像对象。 src 可能是它的属性。

编辑：这是一个jsBin 演示。如果data.images 实际上是一个对象数组，我的解决方案应该可以工作......