FooGallery.Template

Name	Type	Attributes	Description
`options`	FooGallery~Options	<optional>	The options for the template.
`element`	jQuery	<optional>	The jQuery object of the templates' container element. If not supplied one will be created within the `parent` element supplied to the initialize method.

Members

$el :jQuery The jQuery object for the template container.: Details

Type

jQuery

Source

core/js/foogallery.js, line 3475
opt :FooGallery~Options The options for the template.: Details

Type

FooGallery~Options

Source

core/js/foogallery.js, line 3482
template :object Any custom options for the template.: Details

Type

object

Source

core/js/foogallery.js, line 3489
id :string The ID for the template.: Details

Type

string

Source

core/js/foogallery.js, line 3496
createdSelf :boolean Whether or not the template created its' own container element.: Details

Type

boolean

Source

core/js/foogallery.js, line 3503
cls :FooGallery~CSSClasses The CSS classes for the template.: Details

Type

FooGallery~CSSClasses

Source

core/js/foogallery.js, line 3510
il8n :FooGallery~il8n The il8n strings for the template.: Details

Type

FooGallery~il8n

Source

core/js/foogallery.js, line 3517
sel :FooGallery~CSSSelectors The CSS selectors for the template.: Details

Type

FooGallery~CSSSelectors

Source

core/js/foogallery.js, line 3524
items :FooGallery.Items The item manager for the template.: Details

Type

FooGallery.Items

Source

core/js/foogallery.js, line 3531
<nullable> pages :FooGallery.Paging The page manager for the template.: Details

Type

FooGallery.Paging

Source

core/js/foogallery.js, line 3538
state :FooGallery.State The state manager for the template.: Details

Type

FooGallery.State

Source

core/js/foogallery.js, line 3545

Methods

initialize( [ parent ] ) → {Promise.<FooGallery.Template>} Initialize the template.

Description

Once resolved all options, objects and elements required by the template have been parsed or created and the initial load is complete.

Parameters

Name	Type	Attributes	Description
`parent`	jQuery \| HTMLElement \| string	<optional>	If no element was supplied to the constructor you must supply a parent element for the template to append itself to. This can be a jQuery object, HTMLElement or a CSS selector.

Returns

Fires

Details

create() → {jQuery} Create a new container element for the template returning the jQuery object.

Description

This method is called from within the initialize method only if a container element is required.

Returns

Examples

The below shows an example of what the returned jQuery objects' outer HTML would look like.


<div id="{options.id}" class="{options.cls.container} {options.classes}">
</div>

Details

destroy() Destroy the template.

Description

Once this method is called it can not be stopped and the template will be destroyed.

Fires

Details

loadAvailable() → {Promise.<Array.<FooGallery.Item>>} Check if any available items need to be loaded and loads them.

Returns

Details

raise( eventName [, args ] ) → {jQuery.Event} Raises the supplied eventName on the template element.

Description

This method also executes any listeners set on the template object itself. These listeners are not bound to the element but are executed after the event is raised but before any default logic is executed. The names of these listeners use the following convention; prefix the eventName with "on-" and then camel-case the result. e.g. "pre-init" becomes onPreInit.

Parameters

Name	Type	Attributes	Description
`eventName`	string		The name of the event to raise.
`args`	Array	<optional>	An additional arguments to supply to the listeners for the event.

Returns

Examples

The following displays a listener for the "pre-init.foogallery" event in a sub-classed template.


FooGallery.MyTemplate = FooGallery.Template.extend({
	onPreInit: function(event, template){
		// do something
	}
});

Details

<static> extend( [ definition ] ) → {function} Creates a new class that inherits from this one which in turn allows itself to be extended.

Description

Every class created using this method has both the extend and override static methods added to it to allow it to be extended.

Parameters

Name	Type	Attributes	Description
`definition`	Object	<optional>	An object containing any methods to implement/override.

Returns

Examples

The below shows an example of how to implement inheritance using this method.


// create a base Person class
var Person = FooGallery.utils.Class.extend({
	construct: function(isDancing){
		this.dancing = isDancing;
	},
	dance: function(){
		return this.dancing;
	}
});

var Ninja = Person.extend({
	construct: function(){
		// Call the inherited version of construct()
		this._super( false );
	},
	dance: function(){
		// Call the inherited version of dance()
		return this._super();
	},
	swingSword: function(){
		return true;
	}
});

var p = new Person(true);
console.log( p.dance() ); // => true

var n = new Ninja();
console.log( n.dance() ); // => false
console.log( n.swingSword() ); // => true
console.log(
	p instanceof Person && p.constructor === Person && p instanceof FooGallery.utils.Class
	&& n instanceof Ninja && n.constructor === Ninja && n instanceof Person && n instanceof FooGallery.utils.Class
); // => true

Details

<static> override( name, fn ) Overrides a single method on this class.

Description

This is a helper method for overriding a single function of a FooGallery.utils.Class or one of its child classes. This uses the FooGallery.utils.fn.addOrOverride method internally and simply provides the correct prototype.

Parameters

Name	Type	Description
`name`	string	The name of the function to override.
`fn`	function	The new function to override with, the `_super` method will be made available within this function.

Examples

The below example wraps the Person.prototype.dance method with a new one that inverts the result. Note the override applies even to instances of the class that are already created.


var Person = FooGallery.utils.Class.extend({
  construct: function(isDancing){
    this.dancing = isDancing;
  },
  dance: function(){
    return this.dancing;
  }
});

var p = new Person(true);
console.log( p.dance() ); // => true

Person.override("dance", function(){
	// Call the original version of dance()
	return !this._super();
});

console.log( p.dance() ); // => false

Details

Type Definitions

Options An object containing all default template options.

Properties

Name	Type	Attributes	Default	Description
`id`	string	<optional> <nullable>		The id for the template. This is only required if creating a template without a pre-existing container element that has an `id` attribute.
`type`	string	<optional>	"default"	The type of template to load. If no container element exists to parse the type from this must be supplied so the correct type of template is loaded.
`classes`	string	<optional>	""	A space delimited string of any additional CSS classes to append to the container element of the template.
`on`	object	<optional>	{}	An object containing any template events to bind to.
`lazy`	boolean	<optional>	true	Whether or not to enable lazy loading of images.
`viewport`	number	<optional>	200	The number of pixels to inflate the viewport by when checking to lazy load items.
`items`	Array.<FooGallery.Item~Options> \| Array.<FooGallery.Item> \| string	<optional>	[]	An array of items to load when required. A url can be provided and the items will be fetched using an ajax call, the response should be a properly formatted JSON array of item object.
`delay`	number	<optional>	100	The number of milliseconds to delay the initialization of a template.
`throttle`	number	<optional>	50	The number of milliseconds to wait once scrolling has stopped before performing any work.
`timeout`	number	<optional>	60000	The number of milliseconds to wait before forcing a timeout when loading items.
`src`	string	<optional>	"data-src"	The name of the attribute to retrieve an images src url from.
`srcset`	string	<optional>	"data-srcset"	The name of the attribute to retrieve an images srcset url from.
`placeholder`	string	<optional>		The url to an image to use as a placeholder prior to an image being loaded.
`error`	string	<optional>		The url to an image to use in case an item fails to load.
`template`	object	<optional>	{}	An object containing any additional custom options for the template.
`cls`	FooGallery.Template~CSSClasses	<optional>		An object containing all CSS classes for the template.
`sel`	FooGallery.Template~CSSSelectors	<optional>		An object containing all CSS selectors for the template.
`il8n`	FooGallery.Template~il8n	<optional>		An object containing all il8n strings for the template.
`item`	FooGallery.Item~Options	<optional>		An object containing the default values for all items.
`state`	FooGallery.State~Options	<optional>		An object containing the state options for the template.
`paging`	FooGallery.Paging~Options	<optional>		An object containing the default paging options for the template.

Details

CSSClasses An object containing all CSS classes for the default template.

Properties

Name	Type	Attributes	Default	Description
`container`	string	<optional>	"foogallery"	The base CSS class names to apply to the container element.
`item`	FooGallery.Item~CSSClasses	<optional>		A simple object containing the CSS classes used by an item.

Details

il8n An object containing all il8n strings for the default template.

Details

CSSSelectors An object containing all CSS selectors for the default template.

Description

This object is automatically generated from a classes object and its properties mirror those except the space delimited string of class names is converted into a CSS selector.

Properties

Name	Type	Attributes	Default	Description
`container`	string	<optional>	".foogallery"	The selector for the base CSS class names for the container element.
`item`	FooGallery.Item~CSSSelectors	<optional>		An object containing the CSS selectors for an item.

Details

Events

"pre-init.foogallery" Raised before the template is fully initialized.

Description

At this point in the initialization chain the opt property has not undergone any additional parsing and is just the result of the default options being extended with any user supplied ones.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.

Returns

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"pre-init.foogallery": function(event, template){
			// do something
		}
	}
});

Calling the preventDefault method on the event object will prevent the template being initialized.


$(".foogallery").foogallery({
	on: {
		"pre-init.foogallery": function(event, template){
			if ("some condition"){
				// stop the template being initialized
				event.preventDefault();
			}
		}
	}
});

Details

"init.foogallery" Raised before the template is initialized but after any pre-initialization work is complete.

Description

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.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.

Returns

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"init.foogallery": function(event, template){
			// do something
		}
	}
});

Calling the preventDefault method on the event object will prevent the template being initialized.


$(".foogallery").foogallery({
	on: {
		"init.foogallery": function(event, template){
			if ("some condition"){
				// stop the template being initialized
				event.preventDefault();
			}
		}
	}
});

You can also prevent the default logic and replace it with your own by calling the preventDefault method on the event object and returning a promise.


$(".foogallery").foogallery({
	on: {
		"init.foogallery": function(event, template){
			// stop the default logic
			event.preventDefault();
			// you can execute the default logic by calling the handler directly yourself
			// var promise = template.onInit();
			// replace the default logic with your own
			return Promise;
		}
	}
});

Details

"post-init.foogallery" Raised after the template is initialized but before any post-initialization work is complete.

Description

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.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.

Returns

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"post-init.foogallery": function(event, template){
			// do something
		}
	}
});

Calling the preventDefault method on the event object will prevent the template being initialized.


$(".foogallery").foogallery({
	on: {
		"post-init.foogallery": function(event, template){
			if ("some condition"){
				// stop the template being initialized
				event.preventDefault();
			}
		}
	}
});

You can also prevent the default logic and replace it with your own by calling the preventDefault method on the event object and returning a promise.


$(".foogallery").foogallery({
	on: {
		"post-init.foogallery": function(event, template){
			// stop the default logic
			event.preventDefault();
			// you can execute the default logic by calling the handler directly yourself
			// var promise = template.onPostInit();
			// replace the default logic with your own
			return Promise;
		}
	}
});

Details

"ready.foogallery" Raised after the template is fully initialized and is ready to be interacted with.

Description

This event is raised after all post-initialization work such as setting the initial state and performing the first load are completed.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"ready.foogallery": function(event, template){
			// do something
		}
	}
});

Details

"destroy.foogallery" Raised before the template is destroyed.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"destroy.foogallery": function(event, template){
			// do something
		}
	}
});

Details

"destroy-item.foogallery" Raised when a template destroys an item.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.
`item`	FooGallery.Item	The item to destroy.

Returns

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"destroy-item.foogallery": function(event, template, item){
			// do something
		}
	}
});

Calling the preventDefault method on the event object will prevent the item being destroyed.


$(".foogallery").foogallery({
	on: {
		"destroy-item.foogallery": function(event, template, item){
			if ("some condition"){
				// stop the item being destroyed
				event.preventDefault();
			}
		}
	}
});

You can also prevent the default logic and replace it with your own by calling the preventDefault method on the event object.


$(".foogallery").foogallery({
	on: {
		"destroy-item.foogallery": function(event, template, item){
			// stop the default logic
			event.preventDefault();
			// replacing it with your own destroying the item yourself
			item.$el.off(".foogallery").remove();
			item.$el = null;
			...
			// once all destroy work is complete you must set tmpl to null
			item.tmpl = null;
		}
	}
});

Details

"parse-item.foogallery" Raised when an item needs to parse properties from an element.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.
`item`	FooGallery.Item	The item to populate.
`$element`	jQuery	The jQuery object of the element to parse.

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"parse-item.foogallery": function(event, template, item, $element){
			// do something
		}
	}
});

Calling the preventDefault method on the event object will prevent the item properties being parsed from the element.


$(".foogallery").foogallery({
	on: {
		"parse-item.foogallery": function(event, template, item, $element){
			if ("some condition"){
				// stop the item being parsed
				event.preventDefault();
			}
		}
	}
});

You can also prevent the default logic and replace it with your own by calling the preventDefault method on the event object and then populating the item properties from the element.


$(".foogallery").foogallery({
	on: {
		"parse-item.foogallery": function(event, template, item, $element){
			// stop the default logic
			event.preventDefault();
			// replacing it with your own setting each property of the item yourself
			item.$el = $element;
			...
			// once all properties are set you must set isParsed to true
			item.isParsed = true;
		}
	}
});

Details

"parsed-item.foogallery" Raised after an item has been parsed from an element.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.
`item`	FooGallery.Item	The item that was parsed.
`$element`	jQuery	The jQuery object of the element that was parsed.

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"parsed-item.foogallery": function(event, template, item, $element){
			// do something
		}
	}
});

Details

"create-item.foogallery" Raised when an item needs to create its' elements.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.
`item`	FooGallery.Item	The item to create the elements for.

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"create-item.foogallery": function(event, template, item){
			// do something
		}
	}
});

Calling the preventDefault method on the event object will prevent the item being created.


$(".foogallery").foogallery({
	on: {
		"create-item.foogallery": function(event, template, item){
			if ("some condition"){
				// stop the item being created
				event.preventDefault();
			}
		}
	}
});

You can also prevent the default logic and replace it with your own by calling the preventDefault method on the event object.


$(".foogallery").foogallery({
	on: {
		"create-item.foogallery": function(event, template, item){
			// stop the default logic
			event.preventDefault();
			// replacing it with your own creating each element property of the item yourself
			item.$el = $("<div/>");
			...
			// once all elements are created you must set isCreated to true
			item.isCreated = true;
		}
	}
});

Details

"created-item.foogallery" Raised after an items' elements have been created.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.
`item`	FooGallery.Item	The item that was created.

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"created-item.foogallery": function(event, template, item){
			// do something
		}
	}
});

Details

"append-item.foogallery" Raised when an item needs to append its elements to the template.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.
`item`	FooGallery.Item	The item to append to the template.

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"append-item.foogallery": function(event, template, item){
			// do something
		}
	}
});

Calling the preventDefault method on the event object will prevent the item being appended.


$(".foogallery").foogallery({
	on: {
		"append-item.foogallery": function(event, template, item){
			if ("some condition"){
				// stop the item being appended
				event.preventDefault();
			}
		}
	}
});

You can also prevent the default logic and replace it with your own by calling the preventDefault method on the event object.


$(".foogallery").foogallery({
	on: {
		"append-item.foogallery": function(event, template, item){
			// stop the default logic
			event.preventDefault();
			// replacing it with your own appending the item to the template
			item.$el.appendTo(template.$el);
			...
			// once the item is appended you must set isAttached to true
			item.isAttached = true;
		}
	}
});

Details

"appended-item.foogallery" Raised after an item has appended its' elements to the template.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.
`item`	FooGallery.Item	The item that was appended.

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"appended-item.foogallery": function(event, template, item){
			// do something
		}
	}
});

Details

"detach-item.foogallery" Raised when an item needs to detach its' elements from the template.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.
`item`	FooGallery.Item	The item to detach from the template.

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"detach-item.foogallery": function(event, template, item){
			// do something
		}
	}
});

Calling the preventDefault method on the event object will prevent the item being detached.


$(".foogallery").foogallery({
	on: {
		"detach-item.foogallery": function(event, template, item){
			if ("some condition"){
				// stop the item being detached
				event.preventDefault();
			}
		}
	}
});

You can also prevent the default logic and replace it with your own by calling the preventDefault method on the event object.


$(".foogallery").foogallery({
	on: {
		"detach-item.foogallery": function(event, template, item){
			// stop the default logic
			event.preventDefault();
			// replacing it with your own detaching the item from the template
			item.$el.detach();
			...
			// once the item is detached you must set isAttached to false
			item.isAttached = false;
		}
	}
});

Details

"detached-item.foogallery" Raised after an item has detached its' elements from the template.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.
`item`	FooGallery.Item	The item that was detached.

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"detached-item.foogallery": function(event, template, item){
			// do something
		}
	}
});

Details

"destroy-items.foogallery" Raised before the template destroys its' items.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.
`items`	Array.<FooGallery.Item>	The array of items about to be destroyed.

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"destroy-items.foogallery": function(event, template, items){
			// do something
		}
	}
});

Details

"destroyed-items.foogallery" Raised after the template has destroyed items.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.
`items`	Array.<FooGallery.Item>	The array of items destroyed.

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"destroyed-items.foogallery": function(event, template, items){
			// do something
		}
	}
});

Details

"make-items.foogallery" Raised before the template makes an array of elements or item options into an array of item objects.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.
`items`	Array.<HTMLElement> \| Array.<FooGallery.Item~Options>	The array of Nodes or item options.

Returns

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"make-items.foogallery": function(event, template, items){
			// do something
		}
	}
});

Calling the preventDefault method on the event object will prevent any items being made.


$(".foogallery").foogallery({
	on: {
		"make-items.foogallery": function(event, template, items){
			if ("some condition"){
				// stop any items being made
				event.preventDefault();
			}
		}
	}
});

Details

"made-items.foogallery" Raised after the template has made an array of item objects.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.
`items`	Array.<FooGallery.Item>	The array of items made, this includes parsed items.

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"made-items.foogallery": function(event, template, items){
			// do something
		}
	}
});

Details

"parsed-items.foogallery" Raised after the template has parsed any elements into an array of item objects.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.
`items`	Array.<FooGallery.Item>	The array of items parsed.

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"parsed-items.foogallery": function(event, template, items){
			// do something
		}
	}
});

Details

"create-items.foogallery" Raised before the template creates the items elements.

Parameters

Name	Type	Attributes	Default	Description
`event`	jQuery.Event			The jQuery.Event object for the current event.
`template`	FooGallery.Template			The template raising the event.
`items`	Array.<FooGallery.Item>			The array of items to create.
`append`	boolean	<optional>	false	Whether or not to automatically append the item after it is created.

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"create-items.foogallery": function(event, template, items){
			// do something
		}
	}
});

Calling the preventDefault method on the event object will prevent any items being created.


$(".foogallery").foogallery({
	on: {
		"create-items.foogallery": function(event, template, items){
			if ("some condition"){
				// stop any items being created
				event.preventDefault();
			}
		}
	}
});

Details

"created-items.foogallery" Raised after the template has created the items elements.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.
`items`	Array.<FooGallery.Item>	The array of items created.

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"created-items.foogallery": function(event, template, items){
			// do something
		}
	}
});

Details

"append-items.foogallery" Raised before the template appends any items to itself.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.
`items`	Array.<FooGallery.Item>	The array of items to append.

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"append-items.foogallery": function(event, template, items){
			// do something
		}
	}
});

Calling the preventDefault method on the event object will prevent any items being appended.


$(".foogallery").foogallery({
	on: {
		"append-items.foogallery": function(event, template, items){
			if ("some condition"){
				// stop any items being appended
				event.preventDefault();
			}
		}
	}
});

Details

"appended-items.foogallery" Raised after the template has appended items to itself.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.
`items`	Array.<FooGallery.Item>	The array of items appended.

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"appended-items.foogallery": function(event, template, items){
			// do something
		}
	}
});

Details

"detach-items.foogallery" Raised before the template detaches any items from itself.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.
`items`	Array.<FooGallery.Item>	The array of items to detach.

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"detach-items.foogallery": function(event, template, items){
			// do something
		}
	}
});

Calling the preventDefault method on the event object will prevent any items being detached.


$(".foogallery").foogallery({
	on: {
		"detach-items.foogallery": function(event, template, items){
			if ("some condition"){
				// stop any items being detached
				event.preventDefault();
			}
		}
	}
});

Details

"detached-items.foogallery" Raised after the template has detached items from itself.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.
`items`	Array.<FooGallery.Item>	The array of items detached.

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"detached-items.foogallery": function(event, template, items){
			// do something
		}
	}
});

Details

"load-items.foogallery" Raised before the template loads any items.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.
`items`	Array.<FooGallery.Item>	The array of items to load.

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"load-items.foogallery": function(event, template, items){
			// do something
		}
	}
});

Calling the preventDefault method on the event object will prevent any items being loaded.


$(".foogallery").foogallery({
	on: {
		"load-items.foogallery": function(event, template, items){
			if ("some condition"){
				// stop any items being loaded
				event.preventDefault();
			}
		}
	}
});

Details

"loaded-items.foogallery" Raised after the template has loaded items.

Parameters

Name	Type	Description
`event`	jQuery.Event	The jQuery.Event object for the current event.
`template`	FooGallery.Template	The template raising the event.
`items`	Array.<FooGallery.Item>	The array of items that were loaded.

Examples

To listen for this event and perform some action when it occurs you would bind to it as follows.


$(".foogallery").foogallery({
	on: {
		"loaded-items.foogallery": function(event, template, items){
			// do something
		}
	}
});

FooGallery.Template

new Template( [ options [, element ] ] )

Parameters

Details

Members

$el :jQuery

Details

opt :FooGallery~Options

Details

template :object

Details

id :string

Details

createdSelf :boolean

Details

cls :FooGallery~CSSClasses

Details

il8n :FooGallery~il8n

Details

sel :FooGallery~CSSSelectors

Details

items :FooGallery.Items

Details

<nullable> pages :FooGallery.Paging

Details

state :FooGallery.State

Details

Methods

initialize( [ parent ] ) → {Promise.<FooGallery.Template>}

Description

Parameters

Returns

Fires

Details

create() → {jQuery}

Description

Returns

Examples

Details

destroy()

Description

Fires

Details

loadAvailable() → {Promise.<Array.<FooGallery.Item>>}

Returns

Details

raise( eventName [, args ] ) → {jQuery.Event}

Description

Parameters

Returns

Examples

Details

<static> extend( [ definition ] ) → {function}

Description

Parameters

Returns

Examples

Details

<static> override( name, fn )

Description

Parameters

Examples

Details

Type Definitions

Options

Properties

Details

CSSClasses

Properties

Details

il8n

Details

CSSSelectors

Description

Properties

Details

Events

"pre-init.foogallery"

Description

Parameters