CSS
The below lists the various CSS classes that are included in FooGallery's core files providing some out of the box functionality to templates.
<div id="[id]" class="foogallery fg-light fg-loading-default fg-loaded-fade-in">
<!-- repeatable items -->
</div>Note
Not every CSS class listed will work with every template so please check the templates documentation to see if it lists any incompatibilities.
Theme
These CSS classes determine the overall appearance of an item, affecting properties such as the border, background, font and shadow colors and even the loading icons.
fg-light
fg-dark
Note
If no theme is set some classes like the border size and rounded corners will still apply there sizes but no colors will be set. This can be useful when creating a custom style however
note that as we use .gif for the loading icons they are created with solid background colors matching the light and dark themes. If you are creating your own theme that
changes the background color of loading items you will need to provide your own icons with the correct background color.
Loaded effects
These CSS classes control the effect an item uses to display itself once it has been loaded.
fg-loaded-fade-in
fg-loaded-slide-up
fg-loaded-slide-down
fg-loaded-slide-left
fg-loaded-slide-right
fg-loaded-scale-up
fg-loaded-swing-down
fg-loaded-drop
fg-loaded-fly
fg-loaded-flip
Note
If viewed in a browser that does not support the transition CSS property the items are simply made visible once loaded.
Loading icons
These CSS classes specify the icon to display when loading an items' thumbnail.
fg-loading-bars
Note
All default icons are created using just CSS.
Border size
These CSS classes specify the border-width for an item and are dependent on an item theme for the actual border-color. In this example we are using the
fg-dark theme so the border stands out against the white background.
fg-border-thin
fg-border-medium
fg-border-thick
If we want to use the fg-light theme we could use the fg-shadow-outline class to give our edges some definition.
Rounded corners
These CSS classes specify the border-radius for an item.
fg-round-small
fg-round-medium
fg-round-large
fg-round-full
Drop shadows
These CSS classes specify the box-shadow for an item and are dependent on a item theme being set.
Inner shadows
These CSS classes specify the inner box-shadow for an items thumbnail and are dependent on a item theme being set.
Presets
These CSS classes styles and effects for when a user hovers over an item. This effects the captions, hover effects and hover icons.
fg-preset fg-lily
fg-preset fg-sadie
fg-preset fg-layla
fg-preset fg-zoe
fg-preset fg-oscar
fg-preset fg-sarah
fg-preset fg-goliath
fg-preset fg-selena
fg-preset fg-steve
fg-preset fg-ming
fg-preset fg-jazz
Note
If you use one of these preset styles you must not apply any of the classes from the below Captions, Hover icons and Hover effects sections as they will conflict causing unwanted issues.
Captions
These CSS classes control if and how captions are displayed for an item. Captions are either displayed always and then hidden when hovered or they can be set to display only on hover using one of the Hover effects.
fg-caption-always
When specifying that the captions should display only on hover you must supply both the fg-caption-hover class and one of the Hover effect classes.
fg-caption-hover fg-hover-slide-up
If you are using the fg-caption-hover class and a Hover icon is also selected the icon is displayed above the caption title.
fg-caption-hover fg-hover-slide-up fg-hover-external
Hover icons
These CSS classes specify the icon to display when a user hovers over the item. All icons all retina ready with multiple sizes available.
fg-hover-external
fg-hover-zoom
fg-hover-zoom2
fg-hover-zoom3
fg-hover-plus
fg-hover-circle-plus
fg-hover-eye
Note
If the captions are set to display on hover and a Hover icon is selected the icon is displayed above the caption title.
Hover effects
These CSS classes provide simple effects to display the caption and/or icon for when a user hovers over an item.
fg-hover-instant
fg-hover-fade
fg-hover-slide-up
fg-hover-slide-down
fg-hover-slide-left
fg-hover-slide-right
fg-hover-push
fg-hover-colorize
fg-hover-grayscale
fg-hover-scale
Notes
-
fg-hover-scalecan result in blurry text in items in some browsers, most notably Chrome. -
fg-hover-colorizeandfg-hover-grayscalewill not work in Internet Explorer 10 & 11 as Microsoft removed support for the proprietaryfilter: grayCSS property and supplied no replacement.
JavaScript
The below lists all JavaScript options that are available in FooGallery's core files which configure features such as lazy loading, paging and state management.
FooGallery is designed to work from an HTML first perspective meaning options parsed from the DOM take precedence over those supplied through JavaScript.
The options can be supplied as an object to the jQuery .foogallery() plugin method or by supplying them with the data-foogallery attribute on the container element
using valid JSON syntax including quoted property names.
If the same option is supplied directly to the plugin method and in the data-foogallery attribute, the value from the attribute is used. In the below the lazy
option would be true.
<!-- Supply options using the attribute -->
<div id="gallery-1" class="foogallery" data-foogallery='{"lazy": true}'>
...
</div>
<script>
jQuery(function($){
// Supply options directly to the plugin method
$("#gallery-1").foogallery({
lazy: false // Overridden by the attribute value
});
});
</script>Options* Are required
id string *
A string specifying the id for the gallery.
null
If not supplied directly as an option the container element for the gallery must have an id attribute.
To supply this option through markup you must specify the id attribute on the container element.
<div id="gallery-1">
...
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"id": "gallery-1"
});
});type string *
A string specifying the type of template for the gallery.
"default"
If not supplied as an option the gallery containers' CSS classes will be inspected to determine the correct template to use.
"default"
Performs no layout of items but implements the core features such as item, paging and state management.
"masonry"
Uses the Masonry library to layout it's items.
"justified"
Performs item layout using a justified algorithm.
"responsive"
Performs item layout using basic responsive CSS.
"portfolio"
Performs item layout using a portfolio appearance with always visible captions.
Probably the most common way this option will be set is by the plugin inspecting the container element CSS classes to determine which template to load. The following shows the required classes for each of the supported template types.
<!-- masonry -->
<div classes="foogallery fg-masonry">
...
</div>
<!-- justified -->
<div classes="foogallery fg-justified">
...
</div>
<!-- portfolio -->
<div classes="foogallery fg-portfolio">
...
</div>
<!-- responsive -->
<div classes="foogallery fg-responsive">
...
</div>
<!-- default - only matched if no others do -->
<div classes="foogallery">
...
</div>You can also provide this option by specifying the data-foogallery attribute on the container element and supplying it as a property of the options object using valid JSON syntax including quoted property names.
<div data-foogallery='{"type":"masonry"}'>
...
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"type": "masonry"
});
});lazy boolean
Whether or not to enable the lazy loading of images.
true
This is enabled by default as it improves page load speeds and data consumption.
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='{"lazy":true}'>
...
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"lazy": true
});
});viewport number
The number of pixels to inflate the viewport by when checking for any images to lazy load.
200
By default the plugin will expand the viewport by 200 pixels in all directions and lazy load any images that fall within those bounds.
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='{"viewport":200}'>
...
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"viewport": 200
});
});Note
Setting a negative value for this option will effectively shrink the viewport resulting in images only being lazy loaded after they are already visible.
items array | string
An array of simple objects containing item data.
[]
By default this is simply an empty array as items are generally parsed from the container element. If items are supplied using this option they will be appended after any that have been parsed.
Probably the most common way items will be supplied is through markup letting the plugin parse each of the containers' div.fg-item elements. These items should conform
to the following structure. For more information on each of the [values] please see the options below.
<div class="fg-item">
<figure class="fg-item-inner">
<a class="fg-thumb" href="[href]" data-id="[id]" data-title="[caption]" data-description="[description]">
<img class="fg-image" title="[title]" alt="[alt]" width="[width]" height="[height]" data-src="[src]" data-srcset="[srcset]" />
</a>
<figcaption class="fg-caption">
<div class="fg-caption-inner">
<div class="fg-caption-title">[caption]</div>
<div class="fg-caption-desc">[description]</div>
</div>
</figcaption>
</figure>
</div>
You can also provide items by specifying the data-foogallery attribute on the container element and supplying them as a property of the options object using
valid JSON syntax including quoted property names.
<div data-foogallery='{"items":[{...}]}'>
...
</div>Otherwise you can supply items directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"items": [{
"href": "https://url-to-your/item",
"src": "https://url-to-your/thumb.jpg",
"width": 200,
...
},{
...
}]
});
});The last way to provide items is by supplying a url to an endpoint that returns them as a JSON array. The plugin will simply make a jQuery.get() call using the supplied url.
jQuery(function($){
$('.foogallery').foogallery({
"items": "https://url-to-your/endpoint.json"
});
});Item options* Are required
href string *
The url for the items thumbnail anchor.
""
This value must be supplied.
To supply this option through markup you must specify the href attribute on the fg-thumb element.
<div class="fg-item">
<figure class="fg-item-inner">
<a class="fg-thumb" href="https://url-to-your/item">
...
</a>
</figure>
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"items": [{
"href": "https://url-to-your/item"
}]
});
});src string *
The url to the items thumbnail image.
""
This value must be supplied.
To supply this option through markup you must specify the data-src attribute on the fg-image element.
<div class="fg-item">
<figure class="fg-item-inner">
<a class="fg-thumb">
<img class="fg-image" data-src="https://url-to-your/thumb.jpg" />
...
</a>
</figure>
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"items": [{
"src": "https://url-to-your/thumb.jpg"
}]
});
});width number *
The width of the src image.
0
This is the actual width of the src image and must be supplied. It is used not only for layout purposes but for determining the correct thumbnail image to use if a srcset value is supplied.
To supply this option through markup you must specify the width attribute on the fg-image element.
<div class="fg-item">
<figure class="fg-item-inner">
<a class="fg-thumb">
<img class="fg-image" width="250" />
...
</a>
</figure>
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"items": [{
"width": 250
}]
});
});height number *
The height of the src image.
0
This is the actual height of the src image and must be supplied. It is used not only for layout purposes but for determining the correct thumbnail image to use if a srcset value is supplied.
To supply this option through markup you must specify the height attribute on the fg-image element.
<div class="fg-item">
<figure class="fg-item-inner">
<a class="fg-thumb">
<img class="fg-image" height="250" />
...
</a>
</figure>
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"items": [{
"height": 250
}]
});
});id string
A unique id within the gallery for the item.
null
By default the plugin will generate an id based on the items initial index within the array on startup. If using the state feature it is recommended to provide an id for each item so that if its' index changes the across page visits the correct item can be found.
To supply this option through markup you must specify the data-id attribute on the fg-thumb element.
<div class="fg-item">
<figure class="fg-item-inner">
<a class="fg-thumb" data-id="item-1">
...
</a>
</figure>
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"items": [{
"id": "item-1"
}]
});
});srcset string
The srcset for an items thumbnail image.
""
If supplied FooGallery parses the value to determine which image it should use for the thumbnail otherwise it simply uses the src value.
To supply this option through markup you must specify the data-srcset attribute on the fg-image element. The following examples assume a width of 250 for the src image.
<div class="fg-item">
<figure class="fg-item-inner">
<a class="fg-thumb">
<img class="fg-image" data-srcset="https://url-to-your/thumb@2x.jpg 500w,https://url-to-thumb/thumb@3x.jpg 750w" />
...
</a>
</figure>
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"items": [{
"srcset": "https://url-to-your/thumb@2x.jpg 500w,https://url-to-thumb/thumb@3x.jpg 750w"
}]
});
});title string
The plain text for the thumbnail images' title attribute.
""
To supply this option through markup you must specify the title attribute on the fg-image element.
<div class="fg-item">
<figure class="fg-item-inner">
<a class="fg-thumb">
<img class="fg-image" title="My image title" />
...
</a>
</figure>
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"items": [{
"title": "My image title"
}]
});
});alt string
The plain text for the thumbnail images' alt attribute.
""
To supply this option through markup you must specify the alt attribute on the fg-image element.
<div class="fg-item">
<figure class="fg-item-inner">
<a class="fg-thumb">
<img class="fg-image" alt="My image short description." />
...
</a>
</figure>
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"items": [{
"alt": "My image short description."
}]
});
});caption string
The markup for the item captions' title.
""
If not supplied this option will default to the value of the title option.
To supply this option through markup you must specify the data-title attribute on the fg-thumb element.
<div class="fg-item">
<figure class="fg-item-inner">
<a class="fg-thumb" data-title="My title <span>with markup</span>">
...
</a>
</figure>
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"items": [{
"caption": "My title <span>with markup</span>"
}]
});
});description string
The markup for the item captions' description.
""
If not supplied this option will default to the value of the alt option.
To supply this option through markup you must specify the data-description attribute on the fg-thumb element.
<div class="fg-item">
<figure class="fg-item-inner">
<a class="fg-thumb" data-description="My description <span>with markup</span>.">
...
</a>
</figure>
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"items": [{
"description": "My description <span>with markup</span>."
}]
});
});filtering object
An object containing the filtering specific options for the gallery.
The below shows the default filtering options available to all types.
{
"type": "none",
"theme": "fg-light",
"position": "none",
"pushOrReplace": "push",
"tags": [],
"mode": "single",
"min": 0,
"limit": 0,
"showCount": false,
"adjustSize": false,
"smallest": 12,
"largest": 16,
"adjustOpacity": false,
"lightest": 0.5,
"darkest": 1
}type string
A string specifying the type of filtering for the gallery.
"none"
By default filtering is disabled and all items are displayed.
"default"
Allows for basic implementation of custom filtering controls.
"tags"
Displays tag buttons allowing a user to filter displayed items.
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='{"filtering":{"type":"tags"}}'>
...
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"filtering": {
"type": "tags"
}
});
});theme string
A space delimited string of CSS class names to apply to any filtering controls for the gallery.
"fg-light"
By default filtering uses the light theme and currently only has one alternate dark theme. If this value is not one of the supported types the color scheme is left completely up to the class that is 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='{"filtering":{"theme":"fg-dark"}}'>
...
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"filtering": {
"theme": "fg-dark"
}
});
});tags array
An array of strings used to build the tags buttons for the gallery.
[]
By default the filtering component will scan all items and build up a list of all available tags and use that to generate the tags buttons. If supplied only the strings specified will be used to generate the tags buttons.
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='{"filtering":{"tags":["red","blue","green"]}}'>
...
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"filtering": {
"tags": ["red","blue","green"]
}
});
});position string
Where to display the filtering controls for the gallery.
"none"
By default there are no controls as the type is set to "tags"
type defines its' own default value for this option.
"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='{"filtering":{"position":"top"}}'>
...
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"filtering": {
"position": "top"
}
});
});pushOrReplace string
The default method to use when updating the state on filter change.
"push"
"push"
A new history entry is created whenever the filter changes. This allows a user to navigate previously applied filters using their browsers Back and Forward buttons.
"replace"
The current history entry is updated to reflect any filter 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='{"filtering":{"pushOrReplace":"replace"}}'>
...
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"filtering": {
"pushOrReplace": "replace"
}
});
});mode string
The type of mode used when filtering.
"single"
By default only a single tag can be active at a time.
"single"
Only a single tag at a time is used for filtering.
"union"
Multiple tags can be used at a time and they are joined using an OR statement.
"intersect"
Multiple tags can be used at a time and they are joined using an AND statement.
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='{"filtering":{"mode":"union"}}'>
...
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"filtering": {
"mode": "union"
}
});
});showCount boolean
Whether or not to show the count in each of the tags buttons.
false
By default no counts are displayed.
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='{"filtering":{"showCount":false}}'>
...
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"filtering": {
"showCount": false
}
});
});min number
The minimum tag count required for a button to be generated and displayed.
0
By default there is no minimum count and all tags will have buttons generated.
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='{"filtering":{"min":0}}'>
...
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"filtering": {
"min": 0
}
});
});limit number
The maximum number of tag buttons to display, this does not include the All button.
0
By default all tag buttons are displayed. If supplied the component will order the tags by count and then only display the top specified number of tag buttons.
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='{"filtering":{"limit":6}}'>
...
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"filtering": {
"limit": 6
}
});
});adjustSize boolean
Whether or not to adjust the size of the tag buttons according to there specific counts.
false
By default no font sizes are altered. When the adjustSize option is enabled the smallest and largest values are used to calculate a font size applied to each of the tag buttons.
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='{"filtering":{"adjustSize":false}}'>
...
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"filtering": {
"adjustSize": false
}
});
});smallest number
The smallest font size to be used for the tag button with the lowest count.
12
By default the tag button with the lowest count is displayed with a font size of twelve (12) pixels.
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='{"filtering":{"smallest":12}}'>
...
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"filtering": {
"smallest": 12
}
});
});largest number
The largest font size to be used for the tag button with the highest count.
16
By default the tag button with the highest count is displayed with a font size of sixteen (16) pixels.
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='{"filtering":{"largest":16}}'>
...
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"filtering": {
"largest": 16
}
});
});adjustOpacity boolean
Whether or not to adjust the opacity of the tag buttons according to there specific counts.
false
By default no opacities are altered. When the adjustOpacity option is enabled the lightest and darkest option values are used to calculate an opacity applied to each of the tag buttons.
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='{"filtering":{"adjustOpacity":true}}'>
...
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"filtering": {
"adjustOpacity": true
}
});
});lightest number
The opacity to be used for the tag button with the lowest count.
0.5
By default the tag button with the lowest count is displayed with an opacity of zero point five (0.5) meaning it is transparent.
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='{"filtering":{"lightest":0.5}}'>
...
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"filtering": {
"lightest": 0.5
}
});
});darkest number
The opacity to be used for the tag button with the highest count.
1
By default the tag button with the highest count is displayed with an opacity of one (1) meaning it is opaque.
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='{"filtering":{"darkest":1}}'>
...
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"filtering": {
"darkest": 1
}
});
});Note
Please see the individual documentation for each filtering type for more information on any custom options they may support.
paging object
An object containing the paging specific options for the gallery.
The below shows the default paging options available to all types.
{
"type": "none",
"theme": "fg-light",
"size": 30,
"position": "none",
"pushOrReplace": "push",
"scrollToTop": true
}type string
A string specifying the type of paging for the gallery.
"none"
By default paging is disabled and all items are displayed.
"default"
Allows for basic implementation of custom paging controls.
"dots"
Displays small dots allowing a user to navigate between pages.
"pagination"
Displays standard pagination controls using page numbers and buttons to navigate between pages.
"infinite"
Creates pages as a user scrolls down the document.
"loadMore"
Creates pages after a user clicks its' button.
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":{"type":"dots"}'>
...
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"paging": {
"type": "dots"
}
});
});theme string
A space delimited string of CSS class names to apply to any paging controls for the gallery.
"fg-light"
By default paging uses the light theme and currently only has one alternate dark theme. If this value is not one of the supported types the color scheme is left completely up to the class that is 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"
}
});
});size number
The number of items to display per page for the gallery.
30
For "dots" and "pagination" this is the number of items displayed per page while for "infinite" and "loadMore" this is
the number of items loaded as the user scrolls down the page or clicks the Load More button.
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":{"size":30}'>
...
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"paging": {
"size": 30
}
});
});position string
Where to display the paging controls for the gallery.
"none"
By default there are no controls as the type is set to "none" however the "dots", "pagination" and "loadMore"
types define there own default value for this option.
"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"
}
});
});pushOrReplace string
The default method to use when updating the state on page change.
"push"
"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"
}
});
});scrollToTop boolean
Whether or not to scroll to the top of the next page when navigating between pages.
true
By default the scroll position is changed to ensure the first item in the new page is visible within the viewport.
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":{"scrollToTop":true}'>
...
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"paging": {
"scrollToTop": true
}
});
});Note
Please see the individual documentation for each paging type for more information on any custom options they may support.
state object
An object containing the state specific options for the gallery.
The below shows the default state options.
{
"enabled": false,
"pushOrReplace": "replace"
}enabled boolean
Whether or not state is enabled for the gallery.
false
By default the state is not enabled meaning the browser history is not changed and there is no integration with the Back and Forward buttons.
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='{"state":{"enabled":true}'>
...
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"state": {
"enabled": true
}
});
});pushOrReplace string
The default method to use when updating the state.
"replace"
By default if state is enabled the current history entry is updated to reflect any changes.
"push"
A new history entry is created whenever a change occurs. Not recommended but available.
"replace"
The current history entry is updated to reflect any 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='{"state":{"pushOrReplace":"replace"}'>
...
</div>Otherwise you can supply it directly to the plugin method.
jQuery(function($){
$('.foogallery').foogallery({
"state": {
"pushOrReplace": "replace"
}
});
});on object
An object containing event names and listeners to bind to the gallery.
null
If supplied this simply binds events to the gallery ensuring that the various start up events such as pre-init.foogallery or init.foogallery are bound
before they are raised. This option is an object in which the keys represent one or more space separated events and the values represent a listener to be called when those
events are raised.
The below shows supplying the object directly through the options.
jQuery(function($){
$('.foogallery').foogallery({
"on": {
"init.foogallery": function(event, tmpl){
// bind to the plugin initialize event to do something
}
}
});
});Which is the equivalent to writing it like the below, the call to initialize foogallery must occur after binding the events or else you risk any start up event listeners not being called.
jQuery(function($){
$('.foogallery').on({
"init.foogallery": function(event, tmpl){
// bind to the plugin initialize event to do something
}
}).foogallery();
});Events
"pre-init.foogallery"
Raised before the gallery is fully initialized.
At this point in the initialization chain the options have not undergone any additional parsing and are simply the result of the defaults being extended with any user supplied options.
event ~ jQuery.Event
The jQuery.Event object for the current event. Calling preventDefault will prevent the gallery being initialized.
tmpl ~ FooGallery.Template
The template that raised the event.
$(".foogallery").foogallery({
on: {
"pre-init.foogallery": function(event, tmpl){
// do something
}
}
});"init.foogallery"
Raised before the gallery is initialized but after any pre-initialization work is complete.
At this point in the initialization chain all additional option parsing has been completed but the base components such as the items or state are not yet initialized.
event ~ jQuery.Event
The jQuery.Event object for the current event. Calling preventDefault will prevent the gallery being initialized.
tmpl ~ FooGallery.Template
The template that raised the event.
$(".foogallery").foogallery({
on: {
"init.foogallery": function(event, tmpl){
// do something
}
}
});"post-init.foogallery"
Raised after the gallery is initialized but before any post-initialization work is complete.
At this point in the initialization chain all options, objects and elements required by the template have been parsed or created however the initial state has not been set yet and no items have been loaded.
event ~ jQuery.Event
The jQuery.Event object for the current event. Calling preventDefault will prevent the gallery being initialized.
tmpl ~ FooGallery.Template
The template that raised the event.
$(".foogallery").foogallery({
on: {
"post-init.foogallery": function(event, tmpl){
// do something
}
}
});"ready.foogallery"
Raised after the gallery is fully initialized and is ready to be interacted with.
This event is raised after all post-initialization work such as setting the initial state and performing the first load are completed.
event ~ jQuery.Event
The jQuery.Event object for the current event.
tmpl ~ FooGallery.Template
The template that raised the event.
$(".foogallery").foogallery({
on: {
"ready.foogallery": function(event, tmpl){
// do something
}
}
});"destroy.foogallery"
Raised when the gallery is destroyed.
event ~ jQuery.Event
The jQuery.Event object for the current event.
tmpl ~ FooGallery.Template
The template that raised the event.
$(".foogallery").foogallery({
on: {
"destroy.foogallery": function(event, tmpl){
// do something
}
}
});"make-items.foogallery"
Raised before the gallery makes a jQuery object, element array or object array into items.
event ~ jQuery.Event
The jQuery.Event object for the current event. Calling preventDefault will prevent any items being made.
tmpl ~ FooGallery.Template
The template that raised the event.
items ~ jQuery | array<HTMLElement> | array<object>
The jQuery object, element array or object array to make into items.
$(".foogallery").foogallery({
on: {
"make-items.foogallery": function(event, tmpl, items){
// do something
}
}
});"parse-item.foogallery"
Raised before an item is parsed from an element.
event ~ jQuery.Event
The jQuery.Event object for the current event. Calling preventDefault will prevent the item being parsed.
tmpl ~ FooGallery.Template
The template that raised the event.
item ~ FooGallery.Item
The item to populate.
$elem ~ jQuery
The jQuery object of the element to parse.
$(".foogallery").foogallery({
on: {
"parse-item.foogallery": function(event, tmpl, item, $elem){
// do something
}
}
});"parsed-item.foogallery"
Raised after an item has been parsed from an element.
event ~ jQuery.Event
The jQuery.Event object for the current event.
tmpl ~ FooGallery.Template
The template that raised the event.
item ~ FooGallery.Item
The item that was parsed.
$elem ~ jQuery
The jQuery object of the element that was parsed.
$(".foogallery").foogallery({
on: {
"parsed-item.foogallery": function(event, tmpl, item, $elem){
// do something
}
}
});"parsed-items.foogallery"
Raised after the gallery has parsed any elements into items.
event ~ jQuery.Event
The jQuery.Event object for the current event.
tmpl ~ FooGallery.Template
The template that raised the event.
items ~ array<FooGallery.Item>
The items that were parsed.
$(".foogallery").foogallery({
on: {
"parsed-items.foogallery": function(event, tmpl, items){
// do something
}
}
});"made-items.foogallery"
Raised after the gallery has made any items.
event ~ jQuery.Event
The jQuery.Event object for the current event.
tmpl ~ FooGallery.Template
The template that raised the event.
items ~ array<FooGallery.Item>
The items that were made, including parsed items.
$(".foogallery").foogallery({
on: {
"made-items.foogallery": function(event, tmpl, items){
// do something
}
}
});"create-items.foogallery"
Raised before the gallery creates any items elements.
event ~ jQuery.Event
The jQuery.Event object for the current event. Calling preventDefault will prevent any items being created.
tmpl ~ FooGallery.Template
The template that raised the event.
items ~ array<FooGallery.Item>
The array of items about to be created.
$(".foogallery").foogallery({
on: {
"create-items.foogallery": function(event, tmpl, items){
// do something
}
}
});"create-item.foogallery"
Raised before an item creates its' elements.
event ~ jQuery.Event
The jQuery.Event object for the current event. Calling preventDefault will prevent the items' elements being created.
tmpl ~ FooGallery.Template
The template that raised the event.
item ~ FooGallery.Item
The item about to create its' elements.
$(".foogallery").foogallery({
on: {
"create-item.foogallery": function(event, tmpl, item){
// do something
}
}
});"created-item.foogallery"
Raised after an item has created its' elements.
event ~ jQuery.Event
The jQuery.Event object for the current event.
tmpl ~ FooGallery.Template
The template that raised the event.
item ~ FooGallery.Item
The item that was created.
$(".foogallery").foogallery({
on: {
"created-item.foogallery": function(event, tmpl, item){
// do something
}
}
});"created-items.foogallery"
Raised after the gallery has created any items elements.
event ~ jQuery.Event
The jQuery.Event object for the current event.
tmpl ~ FooGallery.Template
The template that raised the event.
items ~ array<FooGallery.Item>
The array of items that were created.
$(".foogallery").foogallery({
on: {
"created-items.foogallery": function(event, tmpl, items){
// do something
}
}
});"append-items.foogallery"
Raised before the gallery appends any items elements to itself.
event ~ jQuery.Event
The jQuery.Event object for the current event. Calling preventDefault will prevent any items being appended.
tmpl ~ FooGallery.Template
The template that raised the event.
items ~ array<FooGallery.Item>
The array of items about to append elements to the gallery.
$(".foogallery").foogallery({
on: {
"append-items.foogallery": function(event, tmpl, items){
// do something
}
}
});"append-item.foogallery"
Raised before an item appends its' elements to the gallery.
event ~ jQuery.Event
The jQuery.Event object for the current event. Calling preventDefault will prevent the items' elements being appended.
tmpl ~ FooGallery.Template
The template that raised the event.
item ~ FooGallery.Item
The item about to append its' elements to the gallery.
$(".foogallery").foogallery({
on: {
"append-item.foogallery": function(event, tmpl, item){
// do something
}
}
});"appended-item.foogallery"
Raised after an item has appended its' elements to the gallery.
event ~ jQuery.Event
The jQuery.Event object for the current event.
tmpl ~ FooGallery.Template
The template that raised the event.
item ~ FooGallery.Item
The item that was appended to the gallery.
$(".foogallery").foogallery({
on: {
"appended-item.foogallery": function(event, tmpl, item){
// do something
}
}
});"appended-items.foogallery"
Raised after the gallery has appended any items elements to itself.
event ~ jQuery.Event
The jQuery.Event object for the current event.
tmpl ~ FooGallery.Template
The template that raised the event.
items ~ array<FooGallery.Item>
The array of items that were appended to the gallery.
$(".foogallery").foogallery({
on: {
"appended-items.foogallery": function(event, tmpl, items){
// do something
}
}
});"detach-items.foogallery"
Raised before the gallery detaches any items elements from itself.
event ~ jQuery.Event
The jQuery.Event object for the current event. Calling preventDefault will prevent any items being detached.
tmpl ~ FooGallery.Template
The template that raised the event.
items ~ array<FooGallery.Item>
The array of items about to detach elements from the gallery.
$(".foogallery").foogallery({
on: {
"detach-items.foogallery": function(event, tmpl, items){
// do something
}
}
});"detach-item.foogallery"
Raised before an item detaches its' elements from the gallery.
event ~ jQuery.Event
The jQuery.Event object for the current event. Calling preventDefault will prevent the items' elements being detached.
tmpl ~ FooGallery.Template
The template that raised the event.
item ~ FooGallery.Item
The item about to detach its' elements from the gallery.
$(".foogallery").foogallery({
on: {
"detach-item.foogallery": function(event, tmpl, item){
// do something
}
}
});"detached-item.foogallery"
Raised after an item has detached its' elements from the gallery.
event ~ jQuery.Event
The jQuery.Event object for the current event.
tmpl ~ FooGallery.Template
The template that raised the event.
item ~ FooGallery.Item
The item that was detached from the gallery.
$(".foogallery").foogallery({
on: {
"detached-item.foogallery": function(event, tmpl, item){
// do something
}
}
});"detached-items.foogallery"
Raised after the gallery has detached any items elements from itself.
event ~ jQuery.Event
The jQuery.Event object for the current event.
tmpl ~ FooGallery.Template
The template that raised the event.
items ~ array<FooGallery.Item>
The array of items that were detached from the gallery.
$(".foogallery").foogallery({
on: {
"detached-items.foogallery": function(event, tmpl, items){
// do something
}
}
});"destroy-items.foogallery"
Raised when the gallery destroys any items.
event ~ jQuery.Event
The jQuery.Event object for the current event.
tmpl ~ FooGallery.Template
The template that raised the event.
items ~ array<FooGallery.Item>
The array of items about to be destroyed.
$(".foogallery").foogallery({
on: {
"destroy-items.foogallery": function(event, tmpl, items){
// do something
}
}
});"destroy-item.foogallery"
Raised when an item destroys itself.
event ~ jQuery.Event
The jQuery.Event object for the current event. Calling preventDefault will prevent the items' elements being detached.
tmpl ~ FooGallery.Template
The template that raised the event.
item ~ FooGallery.Item
The item about to detach its' elements from the gallery.
$(".foogallery").foogallery({
on: {
"detach-item.foogallery": function(event, tmpl, item){
// do something
}
}
});"load-items.foogallery"
Raised before the gallery loads any items.
event ~ jQuery.Event
The jQuery.Event object for the current event. Calling preventDefault will prevent any items being loaded.
tmpl ~ FooGallery.Template
The template that raised the event.
items ~ jQuery | array<HTMLElement> | array<object>
The items about to be loaded.
$(".foogallery").foogallery({
on: {
"load-items.foogallery": function(event, tmpl, items){
// do something
}
}
});"load-item.foogallery"
Raised before an item is loaded.
event ~ jQuery.Event
The jQuery.Event object for the current event. Calling preventDefault will prevent the item being loaded.
tmpl ~ FooGallery.Template
The template that raised the event.
item ~ FooGallery.Item
The item being loaded.
$(".foogallery").foogallery({
on: {
"load-item.foogallery": function(event, tmpl, item){
// do something
}
}
});"error-item.foogallery"
Raised when an error occurs loading an item.
event ~ jQuery.Event
The jQuery.Event object for the current event.
tmpl ~ FooGallery.Template
The template that raised the event.
item ~ FooGallery.Item
The item that errored.
$(".foogallery").foogallery({
on: {
"error-item.foogallery": function(event, tmpl, item){
// do something
}
}
});"loaded-item.foogallery"
Raised after an item has been successfully loaded.
event ~ jQuery.Event
The jQuery.Event object for the current event.
tmpl ~ FooGallery.Template
The template that raised the event.
item ~ FooGallery.Item
The item that was loaded.
$(".foogallery").foogallery({
on: {
"loaded-item.foogallery": function(event, tmpl, item){
// do something
}
}
});"loaded-items.foogallery"
Raised after the gallery has loaded any items.
event ~ jQuery.Event
The jQuery.Event object for the current event.
tmpl ~ FooGallery.Template
The template that raised the event.
items ~ array<FooGallery.Item>
The items that were loaded.
$(".foogallery").foogallery({
on: {
"loaded-items.foogallery": function(event, tmpl, items){
// do something
}
}
});