的tumblr圖像刪除

Question

我想從我的Tumblr博客獲取所有圖像的限制，（沒有限制）

即使我改限人數衆多，默認情況下它變成了20幅圖像，我只是想要知道我創建的代碼有什麼問題，請幫助..提前致謝

請檢查上面的小提琴以檢查結果。

這裏的my code on jsFiddle

$(document).ready(function(){ 
 
    
 
    var tumblrUrl = 'http://api.tumblr.com/v2/blog/'; 
 
    var blogUrl = 'blog.campbrandgoods.com'; 
 
    var apiType = '/posts'; 
 
    var apiKey = 'VtZPFbyp0dLYfOespTdo6oJyOE0nZx4anBSa46j9OoJO4SBIjg'; 
 
    var limit = 995; 
 
    
 
    var postUrl = tumblrUrl + blogUrl + apiType + '?api_key=' + apiKey + '&limit=' + limit; 
 
    
 
    var tileContainer = $('ul#tiles'); 
 
    
 
    $.ajax({ 
 
    url: postUrl, 
 
    type: 'get', 
 
    dataType: 'jsonp', 
 
    complete: function(){ 
 
     
 
    }, 
 
    success: function(strData){ 
 
     
 
     console.log(strData.response.posts); 
 
     
 
     var posts = strData.response.posts; 
 
     $.each(posts, function (i, v) { 
 
     if(typeof v.photos !== 'undefined') { 
 
      var n = Math.floor(Math.random() * 6); 
 
      var info = $($.parseHTML(v.caption)).text(); 
 
      tileContainer.append('<li class="item"><div class="tile-img-container"><img src="' + v.photos[0].alt_sizes[2].url + '"></div><div class="tile-info-container"><a class="various fancybox" href="' + v.post_url + '">' + info + '</a></div></li>'); 
 
      //tileContainer.append('<li class="item"><div class="tile-img-container"><img src="' + v.photos[0].alt_sizes[2].url + '"></div><div class="tile-info-container"><a title="' + info + '" class="various fancybox" href="' + v.photos[0].original_size.url + '">' + info + '</a></div></li>'); 
 
     } 
 
     }); 
 
      
 
     tileContainer.gridalicious({selector: '.item', gutter: 5, animate: true}); 
 
     
 
     $('ul#tiles').on('click', 'li.item', function (e) { 
 
     \t var href = $(this).find('.tile-info-container').find('a').attr('href'); 
 
     $(this).parents('.item').find('.tile-info-container').find('a').trigger('click'); 
 
     window.open(href); 
 
     //$(this).find('.tile-info-container').find('a').trigger('click'); 
 
    \t \t 
 
     }); 
 
     
 
     $('ul#tiles').on('click', 'li.item a', function (e) { 
 
     e.preventDefault(); 
 
     }); 
 
     /* 
 
     
 
     $("a.fancybox").fancybox({ 
 
     'type': 'image', 
 
\t \t 'transitionIn' \t : \t 'elastic', 
 
\t \t 'transitionOut' \t : \t 'elastic', 
 
\t \t 'speedIn' \t \t : \t 600, 
 
\t \t 'speedOut' \t \t : \t 200, 
 
\t \t 'overlayShow' \t : \t true, 
 
     'autoScale'  : false,   
 
    \t 'autoSize'  : false, 
 
     overlayOpacity: 0.7, 
 
     overlayColor: '#000', 
 
     onStart \t \t :function() { 
 
     
 
      $('#fancybox-inner').css('width', '97%'); 
 
      $('#fancybox-inner').css('height', '97%'); 
 
      
 
     }, 
 
     onComplete: function(){ 
 
\t \t \t $('#fancybox-inner').css('width', '97%'); 
 
      $('#fancybox-inner').css('height', '97%'); 
 
\t \t } 
 
\t }); 
 
     */ 
 
     
 
     $('.tile-img-container').on('click', function (e) { 
 
     \t $(this).parents('.item').find('.tile-info-container').find('a').trigger('click'); 
 
     \t e.preventDefault(); 
 
     }); 
 
     
 
     
 
    } 
 
    }); 
 
    
 
    
 
});

#tiles li.item .tile-info-container { 
 
    background-color: rgba(0,0,0,0.7); 
 
    cursor: pointer; 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    font-size: 11px; 
 
}

<div class="container-fluid"> 
 

 
<div id="page" class="row"> 
 
    
 
    <div class="col-md-12 details"> 
 
\t <ul id="tiles"> 
 
    </ul> 
 
    </div> 
 
    
 
</div> 
 
    
 
</div> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

Answer 1

在Tumblr api docs，它明確提出了要求/posts，你只允許有從1到20

限制

我會採取的方法將是一個遞歸函數，需要offset參數。 （從以下我刪除了一些代碼不工作/被註釋掉）

function GetImages(offset) { 
    var postUrl = tumblrUrl + blogUrl + apiType + '?api_key=' + apiKey + '&limit=20&offset=' + offset; 
    $.ajax({ 
     url: postUrl, 
     type: 'get', 
     dataType: 'jsonp', 
     complete: function(){ 

     }, 
     success: function(strData){ 

      console.log(strData.response.posts); 

      var posts = strData.response.posts; 
      $.each(posts, function (i, v) { 
       if(typeof v.photos !== 'undefined') { 
        var n = Math.floor(Math.random() * 6); 
        var info = $($.parseHTML(v.caption)).text(); 
        tileContainer.append('<li class="item"><div class="tile-img-container"><img src="' + v.photos[0].alt_sizes[2].url + '"></div><div class="tile-info-container"><a class="various fancybox" href="' + v.post_url + '">' + info + '</a></div></li>'); 
        //tileContainer.append('<li class="item"><div class="tile-img-container"><img src="' + v.photos[0].alt_sizes[2].url + '"></div><div class="tile-info-container"><a title="' + info + '" class="various fancybox" href="' + v.photos[0].original_size.url + '">' + info + '</a></div></li>'); 
       } 
      }); 


      $('ul#tiles').on('click', 'li.item', function (e) { 
       var href = $(this).find('.tile-info-container').find('a').attr('href'); 
       $(this).parents('.item').find('.tile-info-container').find('a').trigger('click'); 
       window.open(href); 
       //$(this).find('.tile-info-container').find('a').trigger('click'); 

      }); 


      $('ul#tiles').on('click', 'li.item a', function (e) { 
       e.preventDefault(); 
      }); 

      $('.tile-img-container').on('click', function (e) { 
       $(this).parents('.item').find('.tile-info-container').find('a').trigger('click'); 
       e.preventDefault(); 
      }); 

      // actual changed part 
      if (typeof offset === "undefined") { 
       offset = 0; 
      } 
      // (to avoid having to load a hundred pages for each time it was tested, there was also this in the if: `offset < 100 &&`) 
      if (((offset + 20) < strData.response.total_posts)) { 
       GetImages(offset + 20); 
      } 
     } 
    }); 
} 
GetImages(0);