All of the core filtering 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": "tags",
	// overridden
	"position": "top",
	// inherited
	"pushOrReplace": "push",
	"tags": [],
	"mode": "single",
	"min": 0,
	"limit": 0,
	"showCount": false,
	"adjustSize": false,
	"smallest": 12,
	"largest": 16,
	"adjustOpacity": false,
	"lightest": 0.5,
	"darkest": 1
}

Options

position string

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

"top"

By default the controls for the tags type are displayed only above 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({
		"filtering": {
			"position": "top"
		}
	});
});

theme string

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

"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({
		"filtering": {
			"theme": "fg-dark"
		}
	});
});

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

<!-- The container element -->
<div id="example_1" class="foogallery fg-masonry fg-masonry-4col fg-light fg-hover-external fg-loading-default fg-loaded-fade-in fg-center">
	<!-- items.json -->
</div>
jQuery(function($){
	$("#example_1").foogallery({
		"items": "../content/items.json",
		"filtering": {
			"type": "tags"
		}
	});
});
Notes