Markup

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

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

    <a href="images/2.png">
        <img src="images/2.png" alt="">
    </a>

    <a href="images/3.png">
        <img src="images/3.png" alt="">
    </a>

</div>

Gallery Designs Markup

There are 3 designs classes you can choose from:

1. Justified : class="gallery-fg justified-fg"

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

2. Grid : class="gallery-fg grid-fg"

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

3. Fullwidth : class="gallery-fg fullwidth-fg"

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

Gallery Item Markup

<a 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.

Add as many items as you like