How To Set Increments for checkLastPage

I am trying to get the checkLastPage option to work. I can't find any coded examples of this, so not sure if I am doing something wrong.

I am loading div/img elements within the container #projectGallery dynamically with query results. I wrapped the infinite scroll in a change function because of this.

I cannot figure out how to set a limit. For instance, to have 9 images show initially and then set 9 additional images as the button increment. I also don't have a button showing up. Is there something I am doing wrong?

$('#projectGallery').on('change', function(e)  {
        var infScroll = new InfiniteScroll( '#projectGallery', {
          // defaults listed

          path: '.pagination__next',
          // REQUIRED. Determines the URL for the next page
          // Set to selector string to use the href of the next page's link
          // path: '.pagination__next'
          // Or set with {{#}} in place of the page number in the url
          // path: '/blog/page/{{#}}'
          // or set with function
          // path: function() {
          //   return return '/articles/P' + ( ( this.loadCount + 1 ) * 10 );
          // }
            /*path: function() {
              // no value returned after 4th loaded page
              if ( this.loadCount < 4 ) {
                var nextIndex = this.loadCount + 2;
                return '' + nextIndex + '.html';
              }
            },*/

          append: undefined,
          // REQUIRED for appending content
          // Appends selected elements from loaded page to the container

          checkLastPage: true,
          // Checks if page has path selector element
          // Set to string if path is not set as selector string:
          //   checkLastPage: '.pagination__next'

          prefill: false,
          // Loads and appends pages on intialization until scroll requirement is met.

          responseType: 'document',
          // Sets the type of response returned by the page request.
          // Set to 'text' to return flat text for loading JSON.

          outlayer: false,
          // Integrates Masonry, Isotope or Packery
          // Appended items will be added to the layout

          scrollThreshold: 400,
          // Sets the distance between the viewport to scroll area
          // for scrollThreshold event to be triggered.

          elementScroll: false,
          // Sets scroller to an element for overflow element scrolling

          loadOnScroll: true,
          // Loads next page when scroll crosses over scrollThreshold

          history: 'replace',
          // Changes the browser history and URL.
          // Set to 'push' to use history.pushState()
          //    to create new history entries for each page change.

          historyTitle: true,
          // Updates the window title. Requires history enabled.

          hideNav: undefined,
          // Hides navigation element

          status: undefined,
          // Displays status elements indicating state of page loading:
          // .infinite-scroll-request, .infinite-scroll-load, .infinite-scroll-error
          // status: '.page-load-status'

          button: '.load-next-button',
          // Enables a button to load pages on click
          // button: '.load-next-button'

          onInit: undefined,
          // called on initialization
          // useful for binding events on init
          // onInit: function() {
          //   this.on( 'append', function() {...})
          // }

          debug: true,
          // Logs events and state changes to the console.
        })
    });

metafizzy / infinite-scroll

How To Set Increments for checkLastPage #887