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

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

Justified

Justified

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>

Grid

Grid

Markup

<div class="gallery-fg grid-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>

Fullwidth

Fullwidth

Markup

<div class="gallery-fg fullwidth-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>
  1. Images : https://unsplash.com/
  2. jQuery : https://jquery.com/
  3. Justified Galleries : http://miromannino.github.io/Justified-Gallery/