FooGallery.Item

Members

---

<readonly> isAttached :boolean

Whether or not the items' elements are appended to the template.

Details

Type

boolean

Source

core/js/foogallery.js, line 4382

---

<readonly> isCreated :boolean

Whether or not the items' elements are created and can be used.

Details

Type

boolean

Source

core/js/foogallery.js, line 4390

---

<readonly> isLoading :boolean

Whether or not the items' image is currently loading.

Details

Type

boolean

Source

core/js/foogallery.js, line 4398

---

<readonly> isLoaded :boolean

Whether or not the items' image has been loaded.

Details

Type

boolean

Source

core/js/foogallery.js, line 4406

---

<readonly> isError :boolean

Whether or not the items' image threw an error while loading.

Details

Type

boolean

Source

core/js/foogallery.js, line 4414

---

<nullable> $el :jQuery

Details

Type

jQuery

Source

core/js/foogallery.js, line 4422

---

<nullable> $inner :jQuery

Details

Type

jQuery

Source

core/js/foogallery.js, line 4428

---

<nullable> $anchor :jQuery

Details

Type

jQuery

Source

core/js/foogallery.js, line 4434

---

<nullable> $image :jQuery

Details

Type

jQuery

Source

core/js/foogallery.js, line 4440

---

<nullable> $caption :jQuery

Details

Type

jQuery

Source

core/js/foogallery.js, line 4446

---

id :string

Details

Type

string

Source

core/js/foogallery.js, line 4455

---

href :string

Details

Type

string

Source

core/js/foogallery.js, line 4461

---

src :string

Details

Type

string

Source

core/js/foogallery.js, line 4467

---

srcset :string

Details

Type

string

Source

core/js/foogallery.js, line 4473

---

width :number

Details

Type

number

Source

core/js/foogallery.js, line 4479

---

height :number

Details

Type

number

Source

core/js/foogallery.js, line 4485

---

title :string

Details

Type

string

Source

core/js/foogallery.js, line 4491

---

description :string

Details

Type

string

Source

core/js/foogallery.js, line 4497

---

attrItem :FooGallery.Item~Attributes

Details

Type

FooGallery.Item~Attributes

Source

core/js/foogallery.js, line 4503

---

tags :Array.<string>

Details

Type

Array.<string>

Source

core/js/foogallery.js, line 4509

---

<nullable> maxWidth :FooGallery.Item~maxWidthCallback

Details

Type

FooGallery.Item~maxWidthCallback

Source

core/js/foogallery.js, line 4515

---

tmpl :FooGallery.Template

The template that created this component.

Details

Type

FooGallery.Template

Inherited From

FooGallery.Component#tmpl

Source

core/js/foogallery.js, line 4016

Methods

---

destroy()

Destroy the item preparing it for garbage collection.

Details

Overrides

FooGallery.Component#destroy

Source

core/js/foogallery.js, line 4538

---

parse( element ) → {boolean}

Parse the supplied element updating the current items' properties.

Parameters

Name	Type	Description
element	jQuery | HTMLElement | string	The element to parse.

Returns

boolean

Fires

FooGallery.Template~"parse-item.foogallery"

Raised when an item needs to parse properties from an element.

FooGallery.Template~"parsed-item.foogallery"

Raised after an item has been parsed from an element.

Details

Source

core/js/foogallery.js, line 4594

---

create() → {boolean}

Create the items' DOM elements and populate the corresponding properties.

Returns

boolean

Fires

FooGallery.Template~"create-item.foogallery"

Raised when an item needs to create its' elements.

FooGallery.Template~"created-item.foogallery"

Raised after an items' elements have been created.

Details

Source

core/js/foogallery.js, line 4700

---

append() → {boolean}

Append the item to the current template.

Returns

boolean

Fires

FooGallery.Template~"append-item.foogallery"

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

FooGallery.Template~"appended-item.foogallery"

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

Details

Source

core/js/foogallery.js, line 4822

---

detach() → {boolean}

Detach the item from the current template preserving its' data and events.

Returns

boolean

Details

Source

core/js/foogallery.js, line 4902

---

load() → {Promise.<FooGallery.Item>}

Load the items' $image.

Returns

Promise.<FooGallery.Item>

Details

Source

core/js/foogallery.js, line 4980

---

fix() → {FooGallery.Item}

Attempts to set a inline width and height on the $image to prevent layout jumps.

Returns

FooGallery.Item

Details

Source

core/js/foogallery.js, line 5022

---

unfix() → {FooGallery.Item}

Removes any inline width and height values set on the $image.

Returns

FooGallery.Item

Details

Source

core/js/foogallery.js, line 5043

---

getThumbUrl( [ refresh ] ) → {string}

Inspect the src and srcset properties to determine which url to load for the thumb.

Parameters

Name	Type	Attributes	Default	Description
refresh	boolean	<optional>	false	Whether or not to force refreshing of the cached value.

Returns

string

Details

Source

core/js/foogallery.js, line 5054

---

scrollTo()

Scroll the item into the center of the viewport.

Details

Source

core/js/foogallery.js, line 5067

---

bounds() → {FooGallery.utils.Bounds}

Get the bounds for the item.

Returns

FooGallery.utils.Bounds

Details

Source

core/js/foogallery.js, line 5090

---

intersects( bounds ) → {boolean}

Checks if the item bounds intersects the supplied bounds.

Parameters

Name	Type	Description
bounds	FooGallery.utils.Bounds	The bounds to check.

Returns

boolean

Details

Source

core/js/foogallery.js, line 5099

---

<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

function

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

Run

Details

Source

core/js/foogallery.js, line 2167

---

<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

Run

Details

Source

core/js/foogallery.js, line 2235

Type Definitions

---

maxWidthCallback( item ) → {number}

Called when setting an items' image size to prevent layout jumps.

Parameters

Name	Type	Description
item	FooGallery.Item	The item to determine the maxWidth for.

Returns

number

Returns the maximum width allowed for the $image element.

Examples

An example of the default behavior this callback replaces would look like the below.

{
	"maxWidth": function(item){
		return item.$image.outerWidth();
	}
}

Details

Type

function

Source

core/js/foogallery.js, line 5123

---

Options

A simple object containing an items' default values.

Properties

Name	Type	Attributes	Default	Description
id	string	<optional> <nullable>		The data-id attribute for the outer element.
href	string	<optional> <nullable>		The href attribute for the anchor element.
src	string	<optional> <nullable>		The src attribute for the image element.
srcset	string	<optional> <nullable>		The srcset attribute for the image element.
width	number	<optional>	0	The width of the image.
height	number	<optional>	0	The height of the image.
title	string	<optional> <nullable>		The title for the image.
description	string	<optional> <nullable>		The description for the image.
tags	Array.<string>	<optional>	[]	The data-tags attribute for the outer element.
maxWidth	FooGallery.Item~maxWidthCallback	<optional> <nullable>		Called when setting an items' image size. If not supplied the images outer width is used.
attr	FooGallery.Item~Attributes	<optional>		Additional attributes to apply to the items' elements.

Details

Type

object

Source

core/js/foogallery.js, line 5136

---

CSSClasses

A simple object containing the CSS classes used by an item.

Properties

Name	Type	Attributes	Default	Description
elem	string	<optional>	"fg-item"	The CSS class for the outer containing div element of an item.
inner	string	<optional>	"fg-item-inner"	The CSS class for the inner containing div element of an item.
anchor	string	<optional>	"fg-thumb"	The CSS class for the a element of an item.
image	string	<optional>	"fg-image"	The CSS class for the img element of an item.
loading	string	<optional>	"fg-idle"	The CSS class applied to an item that is waiting to be loaded.
loading	string	<optional>	"fg-loading"	The CSS class applied to an item while it is loading.
loaded	string	<optional>	"fg-loaded"	The CSS class applied to an item once it is loaded.
error	string	<optional>	"fg-error"	The CSS class applied to an item if it throws an error while loading.
caption	object	<optional>		A simple object containing the CSS classes used by an items' caption. Name Type Attributes Default Description elem string <optional> "fg-caption" The CSS class for the outer containing div element of a caption. inner string <optional> "fg-caption-inner" The CSS class for the inner containing div element of a caption. title string <optional> "fg-caption-title" The CSS class for the title div element of a caption. description string <optional> "fg-caption-desc" The CSS class for the description div element of a caption.

Details

Type

object

Source

core/js/foogallery.js, line 5201

---

Attributes

A simple object used to store any additional attributes to apply to an items' elements.

Properties

Name	Type	Attributes	Default	Description
elem	object	<optional>	{}	The attributes to apply to the items' outer <div/> element.
inner	object	<optional>	{}	The attributes to apply to the items' inner element.
anchor	object	<optional>	{}	The attributes to apply to the items' anchor element.
image	object	<optional>	{}	The attributes to apply to the items' image element.
caption	object	<optional>		A simple object used to store any additional attributes to apply to an items' caption elements. Name Type Attributes Default Description elem object <optional> {} The attributes to apply to the captions' outer <div/> element. inner object <optional> {} The attributes to apply to the captions' inner element. title object <optional> {} The attributes to apply to the captions' title element. description object <optional> {} The attributes to apply to the captions' description element.

Details

Type

object

Source

core/js/foogallery.js, line 5218