Question

我正在构建一个从某个tag name检索Instagram照片的基本应用程序。我正在使用instagram-api-php回购。到现在为止还挺好。我试图加载与tag name相关的更多图片时遇到问题。我正在next_max_id中使用button。我在页面中放置了next_max_id并指定了<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>'; ?>来加载其余照片。但是没有装入照片。如何在点击按钮时加载更多照片？我按照instagram api pagination

中的示例进行操作

的index.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
      ));
?>

ajax.php

{{1}}

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，然后尝试使用{{1作为图像源，实际上它是图像对象。 src可能属于它。

编辑：这是jsBin演示。如果src实际上是一个对象数组，那么我的解决方案应该有效......

点击按钮，从instagram api中检索更多照片

1 个答案: