HTML Markup Section

Version 2.0.0 has a new markup!

if you are still using version 1.1.0 go to section Version 1.1 Markup

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

    <div class="item-fg">

        <img src="images/1.png">

        <div class="caption">Some caption goes here</div>

        <a href="images/1.png"></a>

    </div>

    <div class="item-fg">

        <img src="images/2.png">

        <a href="images/2.png"></a>

    </div>

</div>

Designs or Layouts

There are 4 designs classes you can choose from:

Justified : data-design="justified"

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

Grid : data-design="grid"

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

Masonry : data-design="masonry"

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

Fullwidth : data-design="fullwidth"

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

Item Markup

<div class="item-fg">

    <img src="images/1.png" alt="">

    <div class="caption">Some caption goes here</div>

    <a href="images/1.png"></a>

</div>

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.

Do not forget the a tag <a ...></a>.

Responsive Settings

You can choose how many columns per device.

For example, you can display 3 columns for desktop, 2 for tablet and 1 for mobile.

Here is how:

<div class="gallery-fg" data-design="grid" data-desktop="3" data-tablet="2" data-mobile="1">

Only Works with GRID & MASONRY