Core template

All templates in FooGallery offer some core functionality, the core template is what implements it. This template does not implement any layout logic but instead provides item, paging and state managers that can be hooked into by child templates.

The following shows the basic markup required to get the core template to initialize. This markup can and is changed by the other templates so please check the documentation for the template you want to use.

Copy the HTML below to begin working with the core template.

<!-- The container element for template -->
<div id="[id]" class="foogallery">
	<!-- repeatable items -->
</div>

When supplying items through markup the following template can be used. For more information on the actual [values] see the items option.

<!-- Item container, used for position, layout and state purposes, no styling should be applied to this element -->
<div class="fg-item">
	<!-- The inner container for an item, this element is the primary styled element -->
	<figure class="fg-item-inner">
		<!-- The clickable thumb for an item -->
		<a class="fg-thumb" href="[href]" data-id="[id]" data-title="[caption]" data-description="[description]">
			<!-- The thumb image for an item, it uses data-src and data-srcset to let FooGallery control loading -->
			<img class="fg-image" title="[title]" alt="[alt]" width="[width]" height="[height]" data-src="[src]" data-srcset="[srcset]" />
		</a>
		<!-- The optional caption for an item -->
		<figcaption class="fg-caption">
			<div class="fg-caption-inner">
				<div class="fg-caption-title">[caption]</div>
				<div class="fg-caption-desc">[description]</div>
			</div>
		</figcaption>
	</figure>
</div>

If you do not want to use one of the default templates to perform item layout you can use the core template to still get all the core functionality of FooGallery but without any of the layout being performed. This means you have to implement the layout yourself using CSS and / or JavaScript.

The following shows a very simple example using just CSS to layout the items using the fg-item CSS class.

#css_example_1 {
	text-align: center;
}
#css_example_1 .fg-item {
	display: inline-block;
	margin: 3px;
}

<div id="css_example_1" class="foogallery">
	<div class="fg-item">
		<figure class="fg-item-inner">
			<a class="fg-thumb" href="https://unsplash.it/1920/1200?image=1" data-id="item_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://unsplash.it/250/250?image=1"
						 data-srcset="https://unsplash.it/500/500?image=1 500w,https://unsplash.it/750/750?image=1 750w" />
			</a>
		</figure>
	</div>
	<div class="fg-item">
		<figure class="fg-item-inner">
			<a class="fg-thumb" href="https://unsplash.it/1920/1200?image=2" data-id="item_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://unsplash.it/250/250?image=2"
						 data-srcset="https://unsplash.it/500/500?image=2 500w,https://unsplash.it/750/750?image=2 750w" />
			</a>
		</figure>
	</div>
	<div class="fg-item">
		<figure class="fg-item-inner">
			<a class="fg-thumb" href="https://unsplash.it/1920/1200?image=3" data-id="item_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://unsplash.it/250/250?image=3"
						 data-srcset="https://unsplash.it/500/500?image=3 500w,https://unsplash.it/750/750?image=3 750w" />
			</a>
		</figure>
	</div>
	<div class="fg-item">
		<figure class="fg-item-inner">
			<a class="fg-thumb" href="https://unsplash.it/1920/1200?image=4" data-id="item_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://unsplash.it/250/250?image=4"
						 data-srcset="https://unsplash.it/500/500?image=4 500w,https://unsplash.it/750/750?image=4 750w" />
			</a>
		</figure>
	</div>
	<div class="fg-item">
		<figure class="fg-item-inner">
			<a class="fg-thumb" href="https://unsplash.it/1920/1200?image=5" data-id="item_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://unsplash.it/250/250?image=5"
						 data-srcset="https://unsplash.it/500/500?image=5 500w,https://unsplash.it/750/750?image=5 750w" />
			</a>
		</figure>
	</div>
	<div class="fg-item">
		<figure class="fg-item-inner">
			<a class="fg-thumb" href="https://unsplash.it/1920/1200?image=6" data-id="item_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://unsplash.it/250/250?image=6"
						 data-srcset="https://unsplash.it/500/500?image=6 500w,https://unsplash.it/750/750?image=6 750w" />
			</a>
		</figure>
	</div>
	<div class="fg-item">
		<figure class="fg-item-inner">
			<a class="fg-thumb" href="https://unsplash.it/1920/1200?image=7" data-id="item_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://unsplash.it/250/250?image=7"
						 data-srcset="https://unsplash.it/500/500?image=7 500w,https://unsplash.it/750/750?image=7 750w" />
			</a>
		</figure>
	</div>
</div>

Note

Check the options page to see all core options and events available for use with this template.

An overview of the core template which all other templates are built on.

Basic markup

Usage

Note