JavaScript

All of the core paging options can be used with this type however it does override the default value of the position and pushOrReplace options, implements its' own take of the light and dark themes and then also exposes some custom options to control how pages are created.

The below shows the loadMore default options object. 

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

Options

position string

Where to display the loadMore controls for the gallery. Overrides the default value.

"bottom"

By default the controls for the loadMore type are displayed only below the gallery.

"none"

No controls are displayed even if the type has a registered control.

"top"

Displays the controls above the gallery container.

"bottom"

Displays the controls below the gallery container.

"both"

Displays the controls both above and below the gallery container.

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":{"position":"top"}'>
	...
</div>

Otherwise you can supply it directly to the plugin method.

jQuery(function($){
	$('.foogallery').foogallery({
		"paging": {
			"position": "top"
		}
	});
});

theme string

A space delimited string of CSS class names to apply to the loadMore controls.

"fg-light"

By default this type uses the light theme and currently only supports one alternate dark theme. If this value is not one of the supported types the controls will still be created and positioned however the color scheme is left completely up to the class(es) that are supplied.

"fg-light"

This theme compliments the light item theme.

"fg-dark"

This theme compliments the dark item theme.

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":{"theme":"fg-dark"}'>
	...
</div>

Otherwise you can supply it directly to the plugin method.

jQuery(function($){
	$('.foogallery').foogallery({
		"paging": {
			"theme": "fg-dark"
		}
	});
});
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"
		}
	});
});

amount number

The number of pages to create when clicking the Load More button.

1

By default clicking the Load More button will create exactly one page of items. Setting this value to more than 1 will result in a partial infinite experience where the first page is created immediately after the button is clicked and then any remaining pages are created on demand as the user scrolls down.

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":{"amount":1}'>
	...
</div>

Otherwise you can supply it directly to the plugin method.

jQuery(function($){
	$('.foogallery').foogallery({
		"paging": {
			"amount": 1
		}
	});
});

distance number

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

If the amount option is set to 1 this value is ignored as there are no additional pages to create as the user scrolls.


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

A more user friendly approach than the infinite type this gives control over when to create additional items back to the user allowing them to navigate down past a gallery to content that is below it. The default options provide a one page per click scenario however if you change the amount to a value greater than 1 you can achieve a semi-infinite experience.

The below shows loadMore 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": "loadMore"
		}
	});
});
Notes
Note

Simple to reach for the user.