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 回答