JavaScript

All of the core paging options can be used with this type however it does override the default value of the position option, implements its' own take of the light and dark themes and also exposes some custom options to control the visibility of its' buttons and page links.

The below shows the pagination default options object. 

{
	// required
	"type": "pagination",
	// overridden
	"position": "both",
	// inherited
	"theme": "fg-light",
	"size": 30,
	"pushOrReplace": "push",
	"scrollToTop": true,
	// custom
	"limit": 5,
	"showFirstLast": true,
	"showPrevNext": true,
	"showPrevNextMore": true
}

Options

position string

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

"both"

By default the controls for the pagination type are displayed both above and 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 pagination 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"
		}
	});
});

limit number

The maximum number of page links to display for the gallery.

5

By default only five page links are displayed, this does not include buttons such as Previous and Next. The Previous More and Next More buttons allow a user to navigate any page links hidden by this option.

Setting this option to 0 will display all page links and will force the Previous More and Next More buttons to be hidden ignoring the value of the showPrevNextMore option.

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

Otherwise you can supply it directly to the plugin method.

jQuery(function($){
	$('.foogallery').foogallery({
		"paging": {
			"limit": 5
		}
	});
});

showFirstLast boolean

Whether or not the First and Last buttons are displayed.

true

By default the First and Last buttons are displayed allowing the user to instantly navigate to the first or last available page.

To supply this option through data attributes 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":{"showFirstLast":true}'>
	...
</div>

Otherwise you can supply it directly to the plugin method.

jQuery(function($){
	$('.foogallery').foogallery({
		"paging": {
			"showFirstLast": true
		}
	});
});

showPrevNext boolean

Whether or not the Previous and Next buttons are displayed.

true

By default the Previous and Next buttons are displayed allowing the user to navigate pages sequentially.

To supply this option through data attributes 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":{"showPrevNext":true}'>
	...
</div>

Otherwise you can supply it directly to the plugin method.

jQuery(function($){
	$('.foogallery').foogallery({
		"paging": {
			"showPrevNext": true
		}
	});
});

showPrevNextMore boolean

Whether or not the Previous More and Next More buttons are displayed.

true

By default the Previous More and Next More buttons are displayed allowing the user to navigate any page links hidden by the limit option.

To supply this option through data attributes 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":{"showPrevNextMore":true}'>
	...
</div>

Otherwise you can supply it directly to the plugin method.

jQuery(function($){
	$('.foogallery').foogallery({
		"paging": {
			"showPrevNextMore": true
		}
	});
});

Usage

The big brother of "dots" this type offers a more familiar paging experience by displaying page links using numbers and buttons such as Previous and Next.

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