Jribbble-如何一次加载6张照片

Question

I'm a bit new to Javascript, but I've managed to get things to load to the page which is a start.

I'm trying to load 6 "shots" to a page with this script, but it currently loads them all:

<script type="text/javascript">


$(document).ready(function getDribbbleShots() {   
  $.jribbble.getShotsByPlayerId('abenjamin765', function (playerShots) {
      var html = [];



      $.each(playerShots.shots, function (i, shot) {
          var str = (''+shot.description+'');
          html.push('<div class="col-md-4"><div class="thumbnail"><a href="' +shot.image_url+ '" target="_blank">');
          html.push('<img class="shot-image" src="' + shot.image_url + '" ');
          html.push('alt="' + shot.title + '"></a>');
          //html.push('<div class="caption"><h4>'+ shot.title +'</h4>');
          //html.push('<div class="ellipsis">'+shot.description+'</div>');
          html.push('<p class="imgTitle"><a href="'+shot.url+'" class="btn btn-primary">' + shot.title + '</a></p></div></div></div>');
      });
      $('.dribbble-feed').html(html.join(''));
      //$( ".ellipsis p" ).addClass( "ellipsis" );

  }, {page: 1, per_page: 9});
});

</script>

I also I want to introduce a "load more" button that will load 3 shots at a time.

Any help would be greatly appreciated :)

• Cheers

Answer 1

If you use playerShots.shots.slice(0, 2) , the loop will go through just the first three "shots."

Documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

As far as loading more, you'll want to save the result from the API response to a variable accessible by your code that shows more "shots."