1. Home
  2. Namespaces
  3. FooGallery

FooGallery

The core namespace for the plugin containing all its code.

Description

This plugin houses all it's code within a single FooGallery global variable to prevent polluting the global namespace and to make accessing its various members simpler.

Examples

As this namespace is registered as a global on the window object, it can be accessed using the window. prefix.


var fg = window.FooGallery;

Or without it.


var fg = FooGallery;

When using this namespace I would recommend aliasing it to a short variable name such as fg or as used internally _.


// alias the FooGallery namespace
var _ = FooGallery;

This is not required but lets us write less code and allows the alias to be minified by compressors like UglifyJS. How you choose to alias the namespace is up to you. You can use the simple var method as seen above or supply the namespace as a parameter when creating a new scope as seen below.


// create a new scope to work in passing the namespace as a parameter
(function(_){

	// use `_.` to access members and methods

})(FooGallery);
Details

core/js/foogallery.js, line 38

Classes

new TemplateFactory()

A factory for galleries allowing them to be easily registered and created.

new PagingFactory()

A factory for paging types allowing them to be easily registered and created.

new Template( [ options [, element ] ] )

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

new Component( template )

The base class for all child components of a template.

new State( template )

This class manages all the getting and setting of its' parent templates' state.

new Item( template [, options ] )

The base class for an item.

new Items( template )

This class controls everything related to items and serves as the base class for the various paging types.

new MasonryTemplate( [ options [, element ] ] )

The Masonry template for FooGallery.

new ImageViewer( element, options )

The main class for the Image Viewer template for FooGallery.

Namespaces

utils

This namespace contains common utility methods and code shared between our plugins.

Members

<static> $ :jQuery

A reference to the jQuery object the plugin is registered with.

Description

This is used internally for all jQuery operations to help work around issues where multiple jQuery libraries have been included in a single page.

Examples

The following shows the issue when multiple jQuery's are included in a single page.


<script src="jquery-1.12.4.js"></script>
<script src="foogallery.js"></script>
<script src="jquery-2.2.4.js"></script>
<script>
	jQuery(function($){
		$(".selector").foogallery(); // => This would throw a TypeError: $(...).foogallery is not a function
	});
</script>

The reason the above throws an error is that the $.fn.foogallery function is registered to the first instance of jQuery in the page however the instance used to create the ready callback and actually try to execute $(...).foogallery() is the second. To resolve this issue ideally you would remove the second instance of jQuery however you can use the FooGallery.$ member to ensure you are always working with the instance of jQuery the plugin was registered with.


<script src="jquery-1.12.4.js"></script>
<script src="foogallery.js"></script>
<script src="jquery-2.2.4.js"></script>
<script>
	FooGallery.$(function($){
		$(".selector").foogallery(); // => It works!
	});
</script>
Details
jQuery

core/js/foogallery.js, line 3

<static> emptyImage :string

The url of an empty 1x1 pixel image used as the default value for the placeholder and error options.

Details
string

"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="

core/js/foogallery.js, line 2944

<static> dataTemplate :string

The name to use when getting or setting an instance of a template on an element using jQuery's .data() method.

Details
string

"__FooGallery__"

core/js/foogallery.js, line 2953

<static> dataItem :string

The name to use when getting or setting an instance of a item on an element using jQuery's .data() method.

Details
string

"__FooGalleryItem__"

core/js/foogallery.js, line 2962

<static> template :FooGallery.TemplateFactory

The factory used to register and create the various template types of FooGallery.

Details
FooGallery.TemplateFactory

core/js/foogallery.js, line 3263

<static> paging :FooGallery.PagingFactory

The factory used to register and create the various paging types of FooGallery.

Details
FooGallery.PagingFactory

core/js/foogallery.js, line 3445

<static> components :FooGallery.utils.Factory

A factory for registering and creating basic gallery components.

Details
FooGallery.utils.Factory

core/js/foogallery.js, line 4034

Type Definitions

State

An object used to store the state of a template.

Properties
Name Type Attributes Description
p number <optional>

The current page number.
i string <optional>
<nullable>

The currently selected item.
Details
object

core/js/foogallery.js, line 4345