Загружайте больше вместо перехода на следующую страницу с помощью разбиения на страницы/API

Я работаю над проектом для отображения выбранных фотографий Instagram в альбоме по хэштегу, поскольку API Instagram ограничивает 35 изображений на вызов API. ) или смесь PHP и AJAX. Я выбрал последнее, потому что не хотел, чтобы мой токен доступа и идентификатор пользователя были доступны в коде моей галереи.

    <?PHP
function jsongram($next=null){
    $userid = "xxx";
    $accessToken = "xxx";
    $url = ("https://api.instagram.com/v1/users/{$userid}/media/recent/?access_token={$accessToken}");

    if($url !== null) {
        $url .= '&max_id=' . $next;
    }

    //Also Perhaps you should cache the results as the instagram API is slow
    $cache = './'.sha1($url).'.json';
    //unlink($cache); // Clear the cache file if needed

    if(file_exists($cache) && filemtime($cache) > time() - 60*60){
        // If a cache file exists, and it is newer than 1 hour, use it
        $jsonData = json_decode(file_get_contents($cache));
    }else{
        $jsonData = json_decode((file_get_contents($url)));
        file_put_contents($cache,json_encode($jsonData));
    }


   ?>

<html>
<head>
</head>
<body>

<?php
    $data_array = array(); 
    foreach ($jsonData->data as $data){
      if (stripos($data->caption->text,'egypt') === false) {
      }
      else{
        $data_array[] = $data;
        $data = (str_split($data->caption->text)); 
        $data = (array_filter($data));  

      }
    }
    foreach ($data_array as $data):{
    $igimglow = $data->images->low_resolution->url;
    $igimgstd = $data->images->standard_resolution->url;
    $igimgthumb = $data->images->thumbnail->url;
    $igcaption = str_replace('#', '', (preg_replace('/(?:#[\w-]+\s*)+$/', '', $data->caption->text)));
    $igtime = date("F j, Y", $data->caption->created_time);
    $iglikes = $data->likes->count;
    $igcomments = $data->comments->count;
    $iglong = $data->location->longitude;
    $iglat = $data->location->latitude ;
    $igusername = $data->user->username;
    $igfullname = $data->user->full_name;
    $iglink = $data->link;
    $igfilter = $data->filter;
    $igtags = implode(',',$data->tags);
    ?>
            <img src="<?php echo ($igimglow);}?>">
            <?php endforeach ?>

<?php

    if(isset($jsonData->pagination->next_max_id)) {
        $result .= '<div><a href="?next=' . $jsonData->pagination->next_max_id . '">Next</a></div>';
    }

    return $result;
}
?>
    <div id="container">
        <?=jsongram(@$_GET['next']);?>
        <div id="result"></div>
    </div>
</body>
</html>

Вот живой пример приведенного выше кода:

http://johnricedesign.com/examples/pn.php

Как показано выше, на 2-й странице отображаются фотографии с тегом «египет». Я хотел бы заменить ссылку "Далее" для автоматической загрузки на той же странице кнопкой "Загрузить еще" - насколько мне известно, использование AJAX - единственный способ сделать это. Однако я не знаю, как это сделать или даже с чего начать. Вторая очевидная проблема, с которой я сталкиваюсь, заключается в том, что, хотя я удаляю фотографии, которые не содержат подписи «египет», я все еще получаю много пустых мест, я полагаю, что это будет довольно просто исправить, когда будет использоваться AJAX. .

Я рвал на себе волосы последние 5 дней, пытаясь это сделать. Ваша помощь, совет, мудрость, очень ценятся заранее.


person Community    schedule 16.11.2014    source источник
comment
Вы ищете что-то подобное?? davidwalsh.name/demo/lazyload-2.0.php   -  person William Francis Gomes    schedule 16.11.2014
comment
@WilliamFrancisGomes - Нет, это загружает изображения при прокрутке страницы, мне нужно сделать новый вызов API, чтобы загружать еще 35 изображений каждый раз, когда страница прокручивается / нажимается кнопка. Но визуально это очень близко к тому, что я пытаюсь сделать.   -  person    schedule 16.11.2014
comment
Вы можете настроить этот API в соответствии с вашими потребностями (например, управлять номером изображения). Посмотрите документацию и вам все станет ясно. Дай мне знать.   -  person William Francis Gomes    schedule 16.11.2014
comment
@WilliamFrancisGomes - я просмотрел код и документацию. Если я что-то не упустил, в этом коде нигде нет вызова API к чему-либо, синтаксический анализ использует JSON для получения URL-адресов изображений, а затем динамически вставляет их на новую страницу. Хотя мне бы хотелось, чтобы он выглядел визуально похожим на этот, этот код полностью отличается от того, что нужно сделать, если только я что-то не упустил.   -  person    schedule 16.11.2014
comment
Вы также можете просмотреть это: owlgraphic.com/owlcarousel/demos/lazyLoad.html   -  person William Francis Gomes    schedule 16.11.2014
comment
в этой ссылке проверьте Javascript. Есть что-то вроде «items: 4». Используя это, вы можете контролировать, сколько изображений вы хотите показать на каждом прокрутке.   -  person William Francis Gomes    schedule 16.11.2014
comment
@WilliamFrancisGomes. Хотя я ценю вашу попытку помочь мне, эти коды никоим образом не используют вызовы API и даже не взаимодействуют с другим сервером. Пожалуйста, посмотрите на мою демонстрацию и мой код, чтобы понять, чего я пытаюсь достичь. Я совершенно уверен, что AJAX необходимо использовать.   -  person    schedule 16.11.2014
comment
брат, тебе нужно настроить всю штуку ajax и интегрировать ее с последним инструментом, который я тебе дал. Я уже работал с чем-то похожим на вас, используя Owl Carousel, и все работало нормально.   -  person William Francis Gomes    schedule 16.11.2014
comment
@WilliamFrancisGomes - не могли бы вы показать мне пример работы с моим кодом? Возможно, я слишком неопытен или слишком туп, чтобы понять. Вот у кого-то такая же проблема, как и у меня, только они используют все AJAX: stackoverflow.com/questions/13166868/   -  person    schedule 16.11.2014
comment
Братан, ты должен найти способ вызвать API, как только пользователь доберется до конца страницы. После вызова API просто вставьте каждые 35 изображений сразу после изображений, которые вы получили ранее. Это будет непростой вызов. Потребуется некоторое время и мозговой штурм, чтобы сделать что-то подобное.   -  person William Francis Gomes    schedule 16.11.2014


Ответы (1)


Я изменил API для работы с client_id, а не с access_token. Вы можете изменить его обратно, это не будет иметь никакого эффекта.

Демонстрация: https://tjay.co/l/instagrampagination

ajax.php

<?php
function jsongram($next = null)
{
  $userid = "xxx";
  $accessToken = "xxx";
  $url = ("https://api.instagram.com/v1/users/{$userid}/media/recent/?client_id={$accessToken}");

  if ( !empty($next) ) {
    $url.= '&max_id=' . $next;
  }

  // Also Perhaps you should cache the results as the instagram API is slow
  $cache = './' . sha1($url) . '.json';

  // unlink($cache); // Clear the cache file if needed

  // If a cache file exists, and it is newer than 1 hour, use it
  if (file_exists($cache) && filemtime($cache) > time() - 60 * 60) {
      $jsonData = json_decode(file_get_contents($cache));
  } else {
    $jsonData = json_decode(file_get_contents($url));
    file_put_contents($cache, json_encode($jsonData));
  }

  return $jsonData;
}

function instaFormat($jsonData)
{
  $data_array = array();
  $response = array();

  foreach($jsonData->data as $data) {
    if ( !empty($data->caption->text) && stripos($data->caption->text, 'egypt') !== false ) { 
        $data_array[] = $data;
        $data = (str_split($data->caption->text));
        $data = (array_filter($data));
      }
  }

  $response['next'] = $jsonData->pagination->next_max_id;

  foreach($data_array as $data) {
      $igimglow = $data->images->low_resolution->url;
      // $igimgstd = $data->images->standard_resolution->url;
      // $igimgthumb = $data->images->thumbnail->url;
      // $igcaption = str_replace('#', '', (preg_replace('/(?:#[\w-]+\s*)+$/', '', $data->caption->text)));
      // $igtime = date("F j, Y", $data->caption->created_time);
      // $iglikes = $data->likes->count;
      // $igcomments = $data->comments->count;
      // $iglong = $data->location->longitude;
      // $iglat = $data->location->latitude;
      // $igusername = $data->user->username;
      // $igfullname = $data->user->full_name;
      // $iglink = $data->link;
      // $igfilter = $data->filter;
      // $igtags = implode(',', $data->tags);

      $response['data'][] = '<img src="'.$igimglow.'">';
  }

  return $response;
}

if ( isset($_POST['next']) ) {
  echo json_encode(instaFormat(jsongram($_POST['next'])));
  die();
}

index.php

<!doctype html>
<html>
  <body>
    <div data-pictures></div>

    <div><button type="button" data-get-next>Next</button></div>

    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
      jQuery(function($) {
        $(document).on('get-feed', function(e, next_id) {

          var data = {
            next: next_id
          };

          $.post('ajax.php', data, function(response) {
            var container = $('[data-pictures]');
            response = $.parseJSON(response);

            container.html('');
            $('[data-get-next]').attr('data-get-next', response.next);

            $.each(response.data, function(i, val) {
              $(val).appendTo(container);
            });
          });
        });

        $('[data-get-next]').click(function() {
          var next_id = $(this).attr('data-get-next');
          $.event.trigger('get-feed', next_id);
        });

        $.event.trigger('get-feed', 0);
      });
    </script>
  </body>
</html>
person sixlive    schedule 16.11.2014
comment
Комментарии не для расширенного обсуждения; этот разговор был перешел в чат. - person Flexo; 17.11.2014
comment
Можете ли вы показать суть вашего решения в самом ответе, пожалуйста? - person Flexo; 17.11.2014
comment
@sixlive - ты рядом? - person ; 19.11.2014