在按钮单击上从instagram API检索更多照片

techAddict82

我正在构建一个基本的应用程序,该应用程序可以从某人检索Instagram图片tag name我正在使用instagram-api-php回购。到目前为止,一切都很好。我在尝试加载更多与此相关的图片时遇到了问题tag name我正在next_max_id按照instagram api分页中的说明使用我已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
      ));
?>
埃尔兹

改变

$.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实际上是一个对象数组,我的解决方案应该可以工作...

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在按钮上单击使用TypeScript

来自分类Dev

在按钮上单击多个ListView

来自分类Dev

div在按钮上单击显示在jQuery中

来自分类Dev

如何在按钮上添加自定义属性并在android中单击时检索它?

来自分类Dev

错误在按钮上单击Document.Ready()MVC

来自分类Dev

在按钮上单击选择tableViewCell

来自分类Dev

在按钮上单击流星调用javascript函数

来自分类Dev

在按钮单击事件上绑定dxSelectBox

来自分类Dev

使用Jquery在按钮单击上显示模态

来自分类Dev

使用Jquery在按钮单击上隐藏/显示Div

来自分类Dev

从Facebook / Instagram检索照片

来自分类Dev

在按钮单击上切换输入

来自分类Dev

如何在按钮上单击打开instagram应用程序

来自分类Dev

UIAlertController在按钮上单击

来自分类Dev

在按钮上单击添加图像到按钮

来自分类Dev

在按钮上单击,页面无用

来自分类Dev

只单击instagram上的“关注”按钮

来自分类Dev

如何在按钮单击上添加更多元素

来自分类Dev

在按钮上显示div单击

来自分类Dev

在按钮和正文上均单击时,“阅读更多”

来自分类Dev

在按钮单击事件上绑定dxSelectBox

来自分类Dev

使用Django网址在按钮单击时执行api函数-Django / Python

来自分类Dev

从Facebook / Instagram检索照片

来自分类Dev

在按钮上单击隐藏键盘

来自分类Dev

如何在按钮上单击打开instagram应用程序

来自分类Dev

UIAlertController在按钮上单击

来自分类Dev

使用 JavaScript 在按钮单击时刷新或检索当前信息

来自分类Dev

在按钮单击、php、phalcon 上显示更多隐藏文本

来自分类Dev

如何在按钮上动态加载 API 数据 单击 React Native