1. Home
  2. Classes
  3. FooGallery.MasonryTemplate

new MasonryTemplate( [ options [, element ] ] )

The Masonry template for FooGallery.

Description

This template makes use of the popular Masonry library to perform its layout. It supports two basic layout types, fixed and column based.

Parameters
Name Type Attributes Description
options FooGallery.MasonryTemplate~Options <optional>

The options for the template.
element jQuery | HTMLElement <optional>

The jQuery object or HTMLElement of the template. If not supplied one will be created within the parent element supplied to the initialize method.
Examples

The below shows the simplest way to create a Masonry gallery using this template, by simply initializing it on pre-existing elements.


<!-- The container element for the template -->
<div id="gallery-1" class="foogallery fg-masonry">
  <!-- Used by the masonry to handle responsive sizing -->
  <div class="fg-column-width"></div>
  <div class="fg-gutter-width"></div>
  <!-- A single item -->
  <div class="fg-item" data-id="[item.id]">
    <div class="fg-item-inner">
      <a class="fg-thumb" href="[item.href]">
        <img class="fg-image" width="[item.width]" height="[item.height]"
        	title="[item.title]" alt="[item.description]"
        	data-src="[item.src]"
        	data-srcset="[item.srcset]" />
        <!-- Optional caption markup -->
        <div class="fg-caption">
        	<div class="fg-caption-inner">
        	 <div class="fg-caption-title">[item.title]</div>
        	 <div class="fg-caption-desc">[item.description]</div>
        	</div>
        </div>
      </a>
    </div>
  </div>
  <!-- Any number of additional items -->
</div>
<script>
	jQuery(function($){
		$("#gallery-1").foogallery();
	});
</script>

Options can be supplied directly to the .foogallery() method or by supplying them using the data-foogallery attribute. If supplied using the attribute the value must follow valid JSON syntax including quoted property names.


<!-- Supplying the options using the attribute -->
<div id="gallery-1" class="foogallery fg-masonry" data-foogallery='{"lazy": true, "template": {"layout": "col4"}}'>
	<!-- Snip -->
</div>
<script>
	jQuery(function($){
		// Supply the options directly to the method
		$("#gallery-1").foogallery({
			lazy: true,
			template: {
				layout: "col4"
			}
		});
	});
</script>

If required the templates container element can be created from just options however a parent element must be supplied to the initialize method. The created gallery container is appended to the supplied parent. When creating galleries this way all items must be supplied using the items option.


<div id="gallery-parent"></div>
<script>
	jQuery(function($){
		// Create the template using just options
		var tmpl = FooGallery.template.make({
			type: "masonry", // required when creating from options
			lazy: true,
			template: {
				layout: "col4"
			},
			items: [{
				id: "item-1",
				href: "https://url-to-your/full-image.jpg",
				src: "https://url-to-your/thumb-image.jpg",
				width: 250,
				height: 300,
				srcset: "https://url-to-your/thumb-image@2x.jpg 500w,https://url-to-your/thumb-image@3x.jpg 750w",
				title: "Short Item Title",
				description: "Longer item description but still fairly brief."
			},{
				// Any number of additional items
			}]
		});
		// Supply the parent element to the initialize method
		tmpl.initialize("#gallery-parent");
	});
</script>
Details

FooGallery.Template

templates/masonry/js/foogallery.masonry.js, line 89

Members

<nullable> masonry :Masonry

The current Masonry instance for the template.

Description

This value is null until after the pre-init.foogallery event has been raised.

Details
Masonry

templates/masonry/js/foogallery.masonry.js, line 92

cls :FooGallery.MasonryTemplate~CSSClasses

The CSS classes for the Masonry template.

Details
FooGallery.MasonryTemplate~CSSClasses

FooGallery.Template#cls

templates/masonry/js/foogallery.masonry.js, line 100

sel :FooGallery.MasonryTemplate~CSSSelectors

The CSS selectors for the Masonry template.

Details
FooGallery.MasonryTemplate~CSSSelectors

FooGallery.Template#sel

templates/masonry/js/foogallery.masonry.js, line 106

$el :jQuery

The jQuery object for the template container.

Details
jQuery

FooGallery.Template#$el

core/js/foogallery.js, line 3475

opt :FooGallery~Options

The options for the template.

Details
FooGallery~Options

FooGallery.Template#opt

core/js/foogallery.js, line 3482

template :object

Any custom options for the template.

Details
object

FooGallery.Template#template

core/js/foogallery.js, line 3489

id :string

The ID for the template.

Details
string

FooGallery.Template#id

core/js/foogallery.js, line 3496

createdSelf :boolean

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

Details
boolean

FooGallery.Template#createdSelf

core/js/foogallery.js, line 3503

il8n :FooGallery~il8n

The il8n strings for the template.

Details
FooGallery~il8n

FooGallery.Template#il8n

core/js/foogallery.js, line 3517

items :FooGallery.Items

The item manager for the template.

Details
FooGallery.Items

FooGallery.Template#items

core/js/foogallery.js, line 3531

<nullable> pages :FooGallery.Paging

The page manager for the template.

Details
FooGallery.Paging

FooGallery.Template#pages

core/js/foogallery.js, line 3538

state :FooGallery.State

The state manager for the template.

Details
FooGallery.State

FooGallery.Template#state

core/js/foogallery.js, line 3545

Methods

<protected> create() → {jQuery}

Create a new container element for the template returning the jQuery object.

Returns
Examples

The following displays the raw HTML output by this method.


<div id="{current template id}" class="foogallery fg-masonry {additional classes}">
  <div class="fg-column-width"></div>
  <div class="fg-gutter-width"></div>
</div>
Details

FooGallery.Template#create

templates/masonry/js/foogallery.masonry.js, line 113

<protected> onPreInit( event, self )

Listens for the pre-init.foogallery event.

Description

Performs all pre-initialization work required by the Masonry template, specifically handling the layout option and building up the required Masonry options.

Parameters
Name Type Description
event jQuery.Event

The jQuery.Event object for the event.
self FooGallery.MasonryTemplate

The current instance of the template.
Details

templates/masonry/js/foogallery.masonry.js, line 132

<protected> onParsedItems( event, self, items )

Listens for the parsed-items.foogallery event.

Description

Instructs Masonry to perform a layout operation whenever items are parsed.

Parameters
Name Type Description
event jQuery.Event

The jQuery.Event object for the event.
self FooGallery.MasonryTemplate

The current instance of the template.
items Array.<FooGallery.Item>

The array of items that were parsed.
Details

templates/masonry/js/foogallery.masonry.js, line 186

<protected> onAppendedItems( event, self, items )

Listens for the appended-items.foogallery event.

Description

Instructs Masonry to perform a layout operation whenever items are appended.

Parameters
Name Type Description
event jQuery.Event

The jQuery.Event object for the event.
self FooGallery.MasonryTemplate

The current instance of the template.
items Array.<FooGallery.Item>

The array of items that were parsed.
Details

templates/masonry/js/foogallery.masonry.js, line 200

<protected> onDetachItem( event, self, item )

Listens for the detach-item.foogallery event.

Description

If not already overridden this method will override the default logic to detach an item and replace it with Masonry specific logic.

Parameters
Name Type Description
event jQuery.Event

The jQuery.Event object for the event.
self FooGallery.MasonryTemplate

The current instance of the template.
item FooGallery.Item

The item to detach.
Details

templates/masonry/js/foogallery.masonry.js, line 217

<protected> onDetachedItems( event, self, items )

Listens for the detached-items.foogallery event.

Description

Instructs Masonry to perform a layout operation whenever items are detached.

Parameters
Name Type Description
event jQuery.Event

The jQuery.Event object for the event.
self FooGallery.MasonryTemplate

The current instance of the template.
items Array.<FooGallery.Item>

The array of items that were detached.
Details

templates/masonry/js/foogallery.masonry.js, line 236

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.

Details

FooGallery.Template#initialize

core/js/foogallery.js, line 3574

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.

Details

FooGallery.Template#destroy

core/js/foogallery.js, line 3796

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.

Details

FooGallery.Template#loadAvailable

core/js/foogallery.js, line 3840

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

FooGallery.Template#raise

core/js/foogallery.js, line 3860

<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

Details

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

Details

core/js/foogallery.js, line 2235

Type Definitions

Options

An object containing the default options for the Masonry template.

Description

Apart from the layout option the template object is identical to the standard Masonry options.
Note that the template overrides and sets its' own values for the following options based primarily on the layout value; itemSelector, columnWidth, gutter, isFitWidth, percentPosition and transitionDuration.
The layout value can be classed into two categories, fixed width and column type layouts. You can see in the examples below the options the template sets for each of these types of layouts.

Properties
Name Type Attributes Description
template object <optional>

An object containing the custom options for the Masonry template.

Name Type Attributes Default Description
layout string <optional>
 "col4"

The layout to use for the template; "fixed", "col2", "col3", "col4" or "col5".
cls FooGallery.MasonryTemplate~CSSClasses <optional>

An object containing all CSS classes for the Masonry template.
Examples

For both fixed and column layouts the template sets the below option values.


{
	"itemSelector": ".fg-item", // this selector is generated from the classes.item.elem value.
	"columnWidth": ".fg-column-width", // this selector is generated from the classes.masonry.columnWidth value.
	"gutter": ".fg-gutter-width", // this selector is generated from the classes.masonry.gutterWidth value.
	"transitionDuration": 0 // disables masonry's inline transitions to prevent them overriding our CSS class transitions
}

For fixed layouts ("fixed") the template sets the below options. If a number was supplied for the columnWidth or gutter options it is applied to the relevant elements before they are replaced by the selector seen above.


{
	"isFitWidth": true,
	"percentPosition": false
}

For column layouts ("col2","col3","col4","col5") the template sets the below options.


{
	"isFitWidth": false,
	"percentPosition": true
}
Details
FooGallery.Template~Options

templates/masonry/js/foogallery.masonry.js, line 269

CSSClasses

An object containing the default CSS classes for the Masonry template.

Properties
Name Type Attributes Default Description
container string <optional>
 "foogallery fg-masonry"

The base CSS class names to apply to the container element.
columnWidth string <optional>
 "fg-column-width"

The CSS class name to apply to the Masonry column sizer element.
gutterWidth string <optional>
 "fg-gutter-width"

The CSS class name to apply to the Masonry gutter sizer element.
layout object <optional>

An object containing all layout classes.

Name Type Attributes Default Description
fixed string <optional>
 "fg-masonry-fixed"

The CSS class name for a fixed width layout.
col2 string <optional>
 "fg-masonry-2col"

The CSS class name for a two column layout.
col3 string <optional>
 "fg-masonry-3col"

The CSS class name for a three column layout.
col4 string <optional>
 "fg-masonry-4col"

The CSS class name for a four column layout.
col5 string <optional>
 "fg-masonry-5col"

The CSS class name for a five column layout.
layouts string <optional>
 "fg-masonry-fixed fg-masonry-2col fg-masonry-3col fg-masonry-4col fg-masonry-5col"

A space delimited string of all CSS class names from the layout object.
Details
FooGallery.Template~CSSClasses

templates/masonry/js/foogallery.masonry.js, line 297

CSSSelectors

An object containing all CSS selectors for the Masonry template.

Description

This object is automatically generated from a classes object and its properties mirror those except the class name values are converted into CSS selectors.

Properties
Name Type Attributes Default Description
container string <optional>
 ".foogallery.fg-masonry"

The CSS selector for the container element.
columnWidth string <optional>
 ".fg-column-width"

The CSS selector for the Masonry column sizer element.
gutterWidth string <optional>
 ".fg-gutter-width"

The CSS selector for the Masonry gutter sizer element.
layout object <optional>

An object containing all layout CSS selectors.

Name Type Attributes Default Description
fixed string <optional>
 ".fg-masonry-fixed"

The CSS selector for a fixed width layout.
col2 string <optional>
 ".fg-masonry-2col"

The CSS selector for a two column layout.
col3 string <optional>
 ".fg-masonry-3col"

The CSS selector for a three column layout.
col4 string <optional>
 ".fg-masonry-4col"

The CSS selector for a four column layout.
col5 string <optional>
 ".fg-masonry-5col"

The CSS selector for a five column layout.
Details
FooGallery.Template~CSSSelectors

templates/masonry/js/foogallery.masonry.js, line 312