2016-03-28 6 views
2

私はapi、javascriptを使用することに関する知識はほとんどありません。 (私はhtml/cssコーダーです)Instagram apiが動作していません

このAPIを使用して、ユーザーが特定のハッシュタグを使用して投稿した図表ピクチャ を取得するように要求されました。ここで

は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のロードするためのボタンをクリックしたときに、それが機能していません。テスト パス:ny2016

なぜそれが動作していないと私はこれをどのように修正することができ

は、ここに私のデモ http://1ne-studio.com/test2/sample.html IDですか?

ありがとうございました! (私の場合、私はこのAPIのアドレスを使用するように求めてきたhttps://tagplus.jp/plazastyle_Campaign/api/json/medias。)

答えて

0

EDIT:だからあなたのスクリプトはフィドル内の1つの全く異なるように見えます。スクリプトをフィドルのスクリプトに置き換えて、もう一度やり直してください!


旧答え:

あなたは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

ありがとうございました!私はちょうど更新した!チェックしてください! –

関連する問題