Markup

<div class="gallery-fg" data-design="justified">

    <a class="item-fg" href="images/1.png">
        <img src="images/1.png">
        <div class="caption">Some caption goes here</div>
    </a>

    <a class="item-fg" href="images/2.png">
        <img src="images/2.png">
    </a>

</div>

Designs or Layouts

There are 3 designs classes you can choose from:

1. Justified : data-design="justified"

<div class="gallery-fg" data-design="justified">
...
</div>

2. Grid : data-design="grid"

<div class="gallery-fg" data-design="grid">
...
</div>

3. Fullwidth : data-design="fullwidth"

<div class="gallery-fg" data-design="fullwidth">
...
</div>

Item Markup

<a class="item-fg" href="images/1.png">
    <img src="images/1.png" alt="">
    <div class="caption">Some caption goes here</div>
</a>

Add the image link to the href / src properties.

If you want to add a caption add a div with a caption class like the example above.