Quick Start

Before we start, the best way to understand how this plugin works is the demo.html file included in the zip file. ( open it with any text editor and see the markup by yourself )

  1. Download the zip file and extract it.
  2. Copy fancyg.min.css from the css folder and paste it to your project folder.
  3. Copy fancyg.min.js and justifiedGallery.min.js from the js folder and paste it to your project folder.
  4. Now open your index.html file with your text editor, and paste this code between the <head></head> tag. ( if you are already using jquery, do not copy the script line )
<link rel="stylesheet" href="css/fancyg.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  1. After that copy this code and paste it before the body closing tag </body>
<script src="justifiedGallery.min.js"></script>
<script src="fancyg.min.js"></script>
  1. Follow the gallery html markup section now:

HTML Markup Section

Version 1.1.0 has a new markup!

if you are still using version 1.0.0 go to section Version 1.0 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" alt="">
    </a>

    <a class="item-fg" 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 : data-design="justified"
<div class="gallery-fg" data-design="justified">
...
</div>
  1. Grid : data-design="grid"
<div class="gallery-fg" data-design="grid">
...
</div>
  1. Fullwidth : data-design="fullwidth"
<div class="gallery-fg" data-design="fullwidth">
...
</div>

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

Add as many items as you like

Justified

f9a4b80bc5ba24484ef5827569c84141

Markup

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

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

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

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

</div>

Grid

e776d67a1d86a7c8e1cb775e323e68e8

Markup

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

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

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

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

Fullwidth

d2b844442283ff1d76f43daf206c80f5

Markup

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

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

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

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

Images Height

If you are using the justified design and want to change the images height, add this HTML property to the gallery : data-rowheight="200" 200 is the new height.

Markup

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

</div>

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>
  1. Grid : class="gallery-fg grid-fg"
<div class="gallery-fg grid-fg">
...
</div>
  1. 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

<
  1. Images : https://unsplash.com/
  2. jQuery : https://jquery.com/
  3. Justified Galleries : http://miromannino.github.io/Justified-Gallery/