JavaScript

All of the core paging options can be used with this type however it does override the default value of the position option and implements its' own take of the light and dark themes.

The below shows the dots default options object. 

{
	// required
	"type": "dots",
	// overridden
	"position": "both",
	// inherited
	"theme": "fg-light",
	"size": 30,
	"pushOrReplace": "push",
	"scrollToTop": true
}

Options

position string

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

"both"

By default the controls for the dots 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 dots 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"
		}
	});
});

Usage

Probably the simplest type this is best suited for displaying a small number of pages, up to about fifteen, anything above that may start to look too cluttered and we would recommend trying one of the other paging types.

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