High Quality JavaScript Image Gallery Library – Justified-Gallery

Justified-Gallery is a professional and open-source JavaScript image gallery plugin that creates a high-quality image gallery from the various size of images without any extra effort. It supports Colorbox and Swipebox, so if you need lightbox effect with the gallery then just include this to your project.

Features:

• It can be installed with Bower.
• Lightweight and easy to implement.
• Supports lightbox feature with Colorbox and Swipebox.
• Automatically justified gallery with various sizes of images.
• It supports infinite scroll also.

Install with Bower

$ bower install justified-gallery

How to use it:

1. Include the Javascript jquery.justifiedGallery.min.js at the bottom of the web page.

<script src="path/to/jquery.justifiedGallery.min.js"></script>

2. Include the CSS justifiedGallery.min.css in the header of the page.

<link rel="stylesheet" href="path/to/justifiedGallery.min.css">

3. Add the basic HTML to the page.

<div id="default-gallery">
  <a href="path/to/demo-1.jpg">
    <img alt="Title 1" src="path/to/demo-1.jpg"/>
  </a>
  <a href="path/to/demo-2.jpg">
    <img alt="Title 2" src="path/to/demo-2.jpg"/>
  </a>
</div>

4. Initialize the plugin and we’re ready to go.

$("#default-gallery").justifiedGallery({
  margins : 5
});

Plugin’s default options:

$("#myGallery").justifiedGallery({
  thumbnailPath: function (currentPath, width, height, image) {
    if (Math.max(width, height) < 250) {
      return currentPath.replace(/(.*)(_[a-z]+)(\..*)/, "$1_small$2");
    } else {
      return currentPath.replace(/(.*)(_[a-z]+)(\..*)/, "$1_medium$2");
    }
  }
});

Commands

$('#commandtest').justifiedGallery('norewind');

Events

$('#callbacktest').justifiedGallery().on('jg.complete', function (e) {
    alert('on complete');
});