new Template( [ options [, element ] ] )

The primary class for FooGallery, this controls the flow of the plugin across all templates.

Parameters
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
jQuery

opt :FooGallery~Options

The options for the template.

Details
FooGallery~Options

template :object

Any custom options for the template.

Details
object

id :string

The ID for the template.

Details
string

createdSelf :boolean

Whether or not the template created its' own container element.

Details
boolean

cls :FooGallery~CSSClasses

The CSS classes for the template.

Details
FooGallery~CSSClasses

il8n :FooGallery~il8n

The il8n strings for the template.

Details
FooGallery~il8n

sel :FooGallery~CSSSelectors

The CSS selectors for the template.

Details
FooGallery~CSSSelectors

items :FooGallery.Items

The item manager for the template.


<nullable> pages :FooGallery.Paging

The page manager for the template.

Details
FooGallery.Paging

state :FooGallery.State

The state manager for the template.

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
Raised before the template is fully initialized.
Raised before the template is initialized but after any pre-initialization work is complete.
Raised after the template is initialized but before any post-initialization work is complete.
Raised after the template is fully initialized and is ready to be interacted with.

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

A jQuery object to use as the container for the template.

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>

destroy()

Destroy the template.

Description

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

Fires
Raised before the template is destroyed.

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

Check if any available items need to be loaded and loads them.

Returns

Resolves with an array of items as the first argument. If no items are loaded this array is empty.


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

The jQuery.Event object or null if no eventName was supplied.

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
	}
});

<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

A new class that inherits from the base class.

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


<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

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
object

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
object

il8n

An object containing all il8n strings for the default template.

Details
object

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
object

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

Resolved once the pre-initialization work is complete, rejected if an error occurs or execution is prevented.

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
jQuery.Event

"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

Resolved once the initialization work is complete, rejected if an error occurs or execution is prevented.

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
jQuery.Event

"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

Resolved once the post-initialization work is complete, rejected if an error occurs or execution is prevented.

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
jQuery.Event

"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
jQuery.Event

"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
jQuery.Event

"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

true if the item has been successfully 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-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
jQuery.Event

"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
jQuery.Event

"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
jQuery.Event

"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
jQuery.Event

"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
jQuery.Event

"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
jQuery.Event

"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
jQuery.Event

"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
jQuery.Event

"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
jQuery.Event

"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
jQuery.Event

"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
jQuery.Event

"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

A filtered list of items to make.

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
jQuery.Event

"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
jQuery.Event

"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
jQuery.Event

"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
jQuery.Event

"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
jQuery.Event

"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
jQuery.Event

"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
jQuery.Event

"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
jQuery.Event

"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
jQuery.Event

"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
jQuery.Event

"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
		}
	}
});
Details
jQuery.Event