0

特定のタグから写真を取得しようとしています。すばらしいチュートリアルを見つけて、ページネーションを使って Instagram から写真を引き出すことができました。

私が今直面している問題は、写真の最後まで表示されると重複した写真が表示されることです。

HTML ソース

<!DOCTYPE html>
<html>
<head>
  <script src='http://code.jquery.com/jquery-1.7.2.min.js' type='text/javascript' charset='utf-8'></script>
  <script src='javascripts/application.js' type='text/javascript' charset='utf-8'></script>

  <link rel='stylesheet' href='stylesheets/application.css' type='text/css' media='screen'>
  <title>Photo Stream </title>

  <meta name="description" content="Search for instagram images online.">
    <meta name="author" content="Omar Sahyoun">
</head>
<body>
  <!--<form id='search'>
    <button class="button" type="submit" id="search-button" dir="ltr" tabindex="2">
      <span class="button-content">Search</span>
    </button>
    <div class='search-wrap'>
      <input class='search-tag' type='text' tabindex='1' value='cats' />
    </div>
  </form>-->
<h2 id="search">Photo Stream </h2>
  <div id='photos-wrap'>
  </div>

  <div class='paginate'>
    <a class='button'  style='display:none;' data-max-tag-id='' href='#'>View More...</a>
  </div>
</body>
</html>

Javascript ファイル

// Add trim function support for IE7/IE8
if(typeof String.prototype.trim !== 'function') {
    String.prototype.trim = function() {
        return this.replace(/^\s+|\s+$/g, '');
    }
}

// Instantiate an empty object.
var Instagram = {};

// Small object for holding important configuration data.
Instagram.Config = {
  clientID: 'xxxx',
  apiHost: 'https://api.instagram.com'
};

// Quick and dirty templating solution.
Instagram.Template = {};
Instagram.Template.Views = {

  "photo": "<div class='photo'>" +
            "<a href='{url}' target='_blank'><img class='main' src='{photo}' width='250' height='250' style='display:none;' onload='Instagram.App.showPhoto(this);' /></a>" +
            "<span class='heart'><strong>{count}</strong></span><span class='comment'><strong>{count2}</strong></span>" +
            "<span class='avatar'><iframe src='//www.facebook.com/plugins/like.php?href={url}&amp;send=false&amp;layout=button_count&amp;width=40&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;' scrolling='no' frameborder='0' style='border:none; overflow:hidden; width:80px; height:21px;' allowTransparency='true'></iframe></span>" +
          "</div>"
};

Instagram.Template.generate = function(template, data){
  var re, resource;

  template = Instagram.Template.Views[template];
  for(var attribute in data){
    re = new RegExp("{" + attribute + "}","g");
    template = template.replace(re, data[attribute]);
  }
  return template;
};

// ************************
// ** Main Application Code
// ************************
(function(){

  function init(){
    bindEventHandlers();
  }

  function toTemplate(photo){
    photo = {
      count: photo.likes.count,
      count2: photo.comments.count,
      avatar: photo.user.profile_picture,
      photo: photo.images.low_resolution.url,
      url: photo.link
    };

    return Instagram.Template.generate('photo', photo);
  }  

  function toScreen(photos){
    var photos_html = '';

    $('.paginate a').attr('data-max-tag-id', photos.pagination.next_max_id)
                    .fadeIn();

    $.each(photos.data, function(index, photo){
      photos_html += toTemplate(photo);
    });

    $('div#photos-wrap').append(photos_html);
  }


  function generateResource(tag){
    var config = Instagram.Config, url;

    if(typeof tag === 'undefined'){
      throw new Error("Resource requires a tag. Try searching for cats!");
    } else {
      // Make sure tag is a string, trim any trailing/leading whitespace and take only the first 
      // word, if there are multiple.
      tag = String(tag).trim().split(" ")[0];
    }

    url = config.apiHost + "/v1/tags/" + tag + "/media/recent?callback=?&count=10&client_id=" + config.clientID;

    return function(max_id){
      var next_page;
      if(typeof max_id === 'string' && max_id.trim() !== '') {
        next_page = url + "&max_id=" + max_id;
      }
      return next_page || url;
    };
  }

  function paginate(max_id){    
    $.getJSON(generateUrl(tag), toScreen);
  }

  function search(tag){
    resource = generateResource(tag);
    $('.paginate a').hide();
    $('#photos-wrap *').remove();
    fetchPhotos();
  }

  function fetchPhotos(max_id){
    $.getJSON(resource(max_id), toScreen);
  }

  function bindEventHandlers(){
    $('body').on('click', '.paginate a.button', function(){
      var tagID = $(this).attr('data-max-tag-id');
      fetchPhotos(tagID);
      return false;
    });

    // Bind an event handler to the `click` event on the form's button
    $('form#search button').click(function(){
      // Extract the value of the search input text field.
      var tag = $('input.search-tag').val();

      // Invoke `search`, passing `tag`.
      search(tag);

      // Stop event propagation.
      return false;
    });

  }

  function showPhoto(p){
    $(p).fadeIn();
  }

  Instagram.App = {
    search: search,
    showPhoto: showPhoto,
    init: init
  };
})();

$(function(){
  Instagram.App.init();

  // Start with a search on cats; we all love cats.
  Instagram.App.search('hwplus');  
});

写真が最後に達した場合に「もっと見る」ボタンを無効にする方法を見つけてください。また、JSON オブジェクトにキャッシュを追加し、Javascript から変数をフェッチする方法はありますか?

感謝します。

4

1 に答える 1

2

写真の最後に到達するnext_max_tag_idと、存在しなくなります。存在するかどうかを確認し、next_max_tag_id存在しない場合はボタンを無効にする必要があります。この行に新しいコードを実装し、変数を作成してphotos.pagination.next_max_id、ユーザーがボタンをクリックしたときに、変数が定義されているかどうかを確認します。

テストされていないコード:

var next_max = photos.pagination.next_max_id;

if (next_max == 'undefined') {
      var next_max = 'end';
      $('.paginate a').addClass('disabled');
}

//define .disabled in your CSS

$('.paginate a').attr('data-max-tag-id', next_max).fadeIn();
于 2012-11-30T19:43:02.240 に答える