Tumblr image remove the limit

Question

I want to get all of the image from my Tumblr blog, (no limit)

even if I change the limit to the large number, by default it became 20 images, I just want to know what is wrong on my codes that I created, please help.. thanks in advance

please check the fiddle above to check the result.

here's 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) {
      	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();
      });
      /*
      
      $("a.fancybox").fancybox({
        'type': 'image',
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600, 
		'speedOut'		:	200, 
		'overlayShow'	:	true,
        'autoScale'     :   false,         
    	'autoSize'      :   false,
         overlayOpacity: 0.7,
         overlayColor: '#000',
         onStart		:function () {
        
          $('#fancybox-inner').css('width', '97%');
           $('#fancybox-inner').css('height', '97%');
          
        },
        onComplete: function(){
			$('#fancybox-inner').css('width', '97%');
          $('#fancybox-inner').css('height', '97%');
		}
	  });
      */
      
      $('.tile-img-container').on('click', function (e) {
      	$(this).parents('.item').find('.tile-info-container').find('a').trigger('click');
      	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">
	<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

On the Tumblr api docs, it is clearly stated that for the request /posts, you're only allowed to have a limit that goes from 1 to 20.

The approach I'd take would be a recursive function that takes an offset argument. (from the following I've removed some code that wasn't working / was commented out)

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);