JavaScript
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"
}
});
});
Usage
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
-
The items in the example are created from the items.json file and then displayed using the masonry template, light item style, external hover icon, default loading icon and the fade in loaded effect. All these options are available in the Lite version.
-
The images in the example are loaded from satyr.io.