JavaScript

All of the core paging options can be used with this type however it does override the default value of the pushOrReplace option and as it has no controls it ignores the theme and position options.

The below shows the infinite default options object. 

{
	// required
	"type": "pagination",
	// overrides
	"pushOrReplace": "replace",
	// ignored
	"position": "none",
	"theme": "fg-light",
	// inherited
	"size": 30,
	"scrollToTop": true,
	// custom
	"distance": 200
}

Options

pushOrReplace string

The default method to use when updating the state on page change. Overrides the default value.

"replace"

By default this type updates the current history entry to reflect page changes.

"push"

A new history entry is created whenever a page changes. This allows a user to navigate previously viewed pages using their browsers Back and Forward buttons.

"replace"

The current history entry is updated to reflect any page changes.

To supply this option through markup you must specify the data-foogallery attribute on the container element and supply it as a property of the options object using valid JSON syntax including quoted property names.

<div data-foogallery='{"paging":{"pushOrReplace":"replace"}'>
	...
</div>

Otherwise you can supply it directly to the plugin method.

jQuery(function($){
	$('.foogallery').foogallery({
		"paging": {
			"pushOrReplace": "replace"
		}
	});
});

distance number

The maximum distance between the top of the last item and the bottom of the viewport before the next page is created.

200

Setting this option to a negative value would result in the next page being created only after the top of the last item is already visible.

To supply this option through markup you must specify the data-foogallery attribute on the container element and supply it as a property of the options object using valid JSON syntax including quoted property names.

<div data-foogallery='{"paging":{"distance":200}'>
	...
</div>

Otherwise you can supply it directly to the plugin method.

jQuery(function($){
	$('.foogallery').foogallery({
		"paging": {
			"distance": 200
		}
	});
});

Usage

As the user scrolls down the document the infinite type will automatically create pages of items until it has no more items available. The one drawback to using this type is that it makes it difficult for users to reach your site footer. If this is an issue take a look at the loadMore type which gives control over when items are created back to the user.

The below shows infinite being used with its' default options by just setting the type.

<!-- The container element -->
<div id="example_1" class="foogallery fg-responsive fg-light fg-hover-external fg-loading-default fg-loaded-fade-in fg-center fg-gutter-15">
	<!-- items-150x150.json -->
</div>
jQuery(function($){
	$("#example_1").foogallery({
		"items": "../content/items-150x150.json",
		"paging": {
			"type": "infinite"
		}
	});
});
Notes
Warning

This would be difficult to reach for the user.