Masonry template

Uses the Masonry library to layout it's items.

Markup

The following shows the markup required to get the Masonry template to correctly initialize. 

<div id="[id]" class="foogallery fg-masonry">
	<!-- repeatable items -->
</div>

When supplying an items' markup it must look like the below. For more information on the actual [values] see the items option.

<div class="fg-item" data-id="[id]">
	<div class="fg-item-inner">
		<a class="fg-thumb" href="[href]">
			<img class="fg-image" title="[title]" alt="[description]" width="[width]" height="[height]" data-src="[src]" data-srcset="[srcset]" />
			<div class="fg-caption">
				<div class="fg-caption-inner">
					<div class="fg-caption-title">[title]</div>
					<div class="fg-caption-desc">[description]</div>
				</div>
			</div>
		</a>
	</div>
</div>

CSS

The following lists the CSS classes support by this template.

To use any of these classes all you need to do is apply it to the FooGallery container element. 
<div id="[id]" class="foogallery fg-masonry fg-gutter">
	<!-- repeatable items -->
</div>

JavaScript

The following lists all the Masonry specific options that can be supplied using the template option.

Options* Are required

layout string

The type of layout to use for the items.

"col4"

By default this template uses a four column layout for its items.

"fixed"

Items have a fixed width with a fluid number of columns.

"col2"

Items have a fluid width and are displayed in two columns.

"col3"

Items have a fluid width and are displayed in three columns.

"col4"

Items have a fluid width and are displayed in four columns.

"col5"

Items have a fluid width and are displayed in five columns.

To supply this option through markup you must specify the data-foogallery attribute on the container element and supply it as a property of the options object using valid JSON syntax including quoted property names.

<div data-foogallery='{"template":{"layout":"col4"}'>
	...
</div>

Otherwise you can supply it directly to the plugin method.

jQuery(function($){
	$('.foogallery').foogallery({
		"template": {
			"layout": "col4"
		}
	});
});

Usage

Probably the simplest type this is best suited for displaying a small number of pages, up to about fifteen, anything above that may start to look too cluttered and we would recommend trying one of the other paging types.

The below shows a Masonry template being used with its' default options by just applying the fg-masonry CSS class.

<!-- The container element -->
<div id="example_1" class="foogallery fg-masonry fg-light fg-hover-external fg-loading-default fg-loaded-fade-in fg-center">
	<div class="fg-item" data-id="item_1">
		<div class="fg-item-inner">
			<a class="fg-thumb" href="https://satyr.io/1920x1200/1">
				<img class="fg-image" title="Lorem ipsum dolor." alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis."
						 width="250" height="250"
						 data-src="https://satyr.io/250x250/1"
						 data-srcset="https://satyr.io/500x500/1 500w,https://satyr.io/750x750/1 750w" />
			</a>
		</div>
	</div>
	<div class="fg-item" data-id="item_2">
		<div class="fg-item-inner">
			<a class="fg-thumb" href="https://satyr.io/1920x1200/2">
				<img class="fg-image" title="Lorem ipsum dolor." alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis."
						 width="250" height="250"
						 data-src="https://satyr.io/250x250/2"
						 data-srcset="https://satyr.io/500x500/2 500w,https://satyr.io/750x750/2 750w" />
			</a>
		</div>
	</div>
	<div class="fg-item" data-id="item_3">
		<div class="fg-item-inner">
			<a class="fg-thumb" href="https://satyr.io/1920x1200/3">
				<img class="fg-image" title="Lorem ipsum dolor." alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis."
						 width="250" height="250"
						 data-src="https://satyr.io/250x250/3"
						 data-srcset="https://satyr.io/500x500/3 500w,https://satyr.io/750x750/3 750w" />
			</a>
		</div>
	</div>
	<div class="fg-item" data-id="item_4">
		<div class="fg-item-inner">
			<a class="fg-thumb" href="https://satyr.io/1920x1200/4">
				<img class="fg-image" title="Lorem ipsum dolor." alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis."
						 width="250" height="250"
						 data-src="https://satyr.io/250x250/4"
						 data-srcset="https://satyr.io/500x500/4 500w,https://satyr.io/750x750/4 750w" />
			</a>
		</div>
	</div>
	<div class="fg-item" data-id="item_5">
		<div class="fg-item-inner">
			<a class="fg-thumb" href="https://satyr.io/1920x1200/5">
				<img class="fg-image" title="Lorem ipsum dolor." alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis."
						 width="250" height="250"
						 data-src="https://satyr.io/250x250/5"
						 data-srcset="https://satyr.io/500x500/5 500w,https://satyr.io/750x750/5 750w" />
			</a>
		</div>
	</div>
	<div class="fg-item" data-id="item_6">
		<div class="fg-item-inner">
			<a class="fg-thumb" href="https://satyr.io/1920x1200/6">
				<img class="fg-image" title="Lorem ipsum dolor." alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis."
						 width="250" height="250"
						 data-src="https://satyr.io/250x250/6"
						 data-srcset="https://satyr.io/500x500/6 500w,https://satyr.io/750x750/6 750w" />
			</a>
		</div>
	</div>
	<div class="fg-item" data-id="item_7">
		<div class="fg-item-inner">
			<a class="fg-thumb" href="https://satyr.io/1920x1200/7">
				<img class="fg-image" title="Lorem ipsum dolor." alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis."
						 width="250" height="250"
						 data-src="https://satyr.io/250x250/7"
						 data-srcset="https://satyr.io/500x500/7 500w,https://satyr.io/750x750/7 750w" />
			</a>
		</div>
	</div>
</div>
jQuery(function($){
	$("#example_1").foogallery();
});
Notes