2016-03-28 2 views
2

У меня очень мало знаний об использовании api, javascript. (Я кодер html/css)Instagram api не работает

Мне было предложено использовать этот API для получения изображений instagram , которые пользователи размещали с помощью определенного хэштега.

Вот демо, которая разделялась jsfiddle http://jsfiddle.net/j9ynxvox/10/

$(function() { 
    // 「表示」を押すと、画像を取得します 
    var endpoint = 'https://tagplus.jp/demo/api/json/medias'; 

    // ポップアップ用の関数 
    var popup = function(item) { 
    var $container = $('<div>', {'class': 'popup-container'}); 
    $('<div>', {'class': 'popup-overlay'}).appendTo($container); 

    var $template = $($('#popup-template').html()); 
    $template.find('.popup-image').attr('src', item.images.standard_resolution); 
    var userLink = 'https://instagram.com/' + item.media_user.username; 
    $template.find('.user-link').attr('href', userLink); 
    $template.find('.profile-picture') 
      .attr('src', item.media_user.profile_picture); 
    $template.find('.media-user-name').text(item.media_user.username); 
    $template.appendTo($container); 

    $('body').append($container); 
    $container.fadeIn(); 
    }; 

    $(document).on(
    'click', 
    '.popup-overlay', 
    function(e) { 
     e.preventDefault(); 
     $('.popup-container').fadeOut(
     'fast', 
     function() { 
      $(this).remove(); 
     } 
    ); 
    } 
); 

    $('button').click(function() { 
    $('#thumbnail').text(''); 
    $.get(
     endpoint, 
     {count: 12}, 
     function(res) { 
     res.data.forEach(function(item) { 
      var $thumb = $('<img>', { 
      'class': 'insta-thumb', 
      src: item.images.thumbnail 
      }); 
      $thumb.appendTo($('#thumbnails')); 
      $thumb.click(function(e) { 
      e.preventDefault(); 
      popup(item); 
      }); 
     }); 
     }, 
     'jsonp' 
    ); 
    }); 

    $(document).keyup(function(e) { 
    if (e.keyCode === 27) { 
     $('.popup-container').fadeOut(
     'fast', 
     function() { 
      $(this).remove(); 
     } 
    ); 
    } 
    }); 
}); 

В моем случае, я попросил, чтобы использовать этот API-адрес. https://tagplus.jp/plazastyle_Campaign/api/json/medias (его называют http://tagplus.jp/)

Для начала я просто скопировать и вставить этот код jsfiddle моих локальных файлов, но она не работает, когда я нажимаю на кнопку, чтобы загрузить Instagram фотографии.

Вот мой демо http://1ne-studio.com/test2/sample.html ID: тест проход: ny2016

Почему это не работает, и как я могу это исправить?

Благодарим вас за внимание! (В моем случае мне было предложено использовать этот адрес API. https://tagplus.jp/plazastyle_Campaign/api/json/medias)

ответ

0

EDIT: Это похоже на то, что ваш сценарий полностью отличается от сценария в скрипке. Замените свой скрипт на скрипку и попробуйте еще раз!


Старый ответ:

Это потому, что вы не имеете JQuery!

Добавить это где-то в голове и попробуйте снова

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

+0

спасибо за ответ. Это было глупо со мной. Но я добавил jquery, и он все еще не работает .... –

+0

Можете ли вы обновить демо по адресу http://1ne-studio.com/test2/sample.html, чтобы я мог посмотреть? –

+0

Большое вам спасибо за помощь! Я просто обновился! пожалуйста, проверьте! –

Смежные вопросы