instagram分页中的重复照片

我正在尝试从特定标记中拉出照片。发现了一个很棒的教程，我已经设法从分页拉出Instagram的照片。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获取变量？

感谢和赞赏。

来源

2012-11-23 latt

一旦你到达照片的结尾，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-30 19:43:02 tcd

instagram分页中的重复照片

回答

相关问题