This is the simplest of the built-in templates and uses just some CSS to layout its' items. Due to its' simplicity it is recommended that the thumbnail images have the same height.
CSS
The below lists the various CSS classes that are included in FooGallery's core files providing some out of the box functionality to templates.
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-default fg-center">
<!-- repeatable items -->
</div>Alignment
These CSS classes determine the alignment of the items within the gallery.
fg-left
fg-center
fg-right
Gutter
These CSS classes determine the spacing between items within the gallery.
fg-gutter-5
fg-gutter-10
fg-gutter-15
fg-gutter-20
fg-gutter-25
Markup
The following shows the basic markup required to get the default 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 a default template.
<!-- The container element for template -->
<div id="[id]" class="foogallery fg-default">
<!-- 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.
<div class="fg-item">
<figure class="fg-item-inner">
<a class="fg-thumb" href="[href]" data-id="[id]" data-title="[caption]" data-description="[description]">
<img class="fg-image" title="[title]" alt="[alt]" width="[width]" height="[height]" data-src="[src]" data-srcset="[srcset]" />
</a>
<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>Usage
The following shows a simple example of the default template being used to perform layout of items.
<div id="css_example_1" class="foogallery fg-default">
<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.
