title: Fetching more shots using Jribbble
body: <p>So, a question that I've been asking myself is how one should load more shots using the <a href="https://github.com/tylergaw/jribbble" rel="nofollow">jRibbble</a> plugin. Sadly, I couldn't find anything on this subject that makes sense to me. I've only been using JavaScript for about a week now, so I apologize if this appears clumsy. My code so far is as follows:</p>
  
  <pre><code>$(document).ready(function () {
      // this is jRibbble example code if I recall correctly
      $.jribbble.getShotsByPlayerId('name', function (playerShots) {
          var html = [];
  
          $.each(playerShots.shots, function (i, shot) {
              html.push('&lt;li&gt;&lt;a href="' + shot.url + '"&gt;');
              html.push('&lt;img src="' + shot.image_url + '" alt="' + shot.title + '"&gt;&lt;/a&gt;&lt;/li&gt;');
          });
  
          $('#grid').html(html.join(''));
      }, {page: 1, per_page: 6});
  
      $(window).on('load resize', function () {
          window.shotHeight = $('#grid li').outerHeight(true);
      });
  });
  
  $(window).scroll(function () {
      if ($(window).scrollTop() + shotHeight &gt; $(document).height() - $(window).height()) {
          // so that there's a time buffer between the time of request and when the user reaches the bottom of the page (and thus expects new posts)
      }
  });
  </code></pre>
  
  <p>I don't think that it's necessary to mention how thankful I'd be if someone could at least provide some pointers.</p>
  
  <p>Note: as I've already received a downvote I'd like to explain that I'd like to get some pointers, and not that I'm too lazy to code myself.</p>