Responsive Justified Photo Gallery In JavaScript – Cube Gallery

Cube Gallery is a JavaScript library that renders a responsive justified photo gallery from a group of images of different sizes.

Inspired by Flickr Gallery and Google Image Search.

How to use it:

1. Add a group of images to the gallery container.

<div id="gallery" class="gallery">
  <img src="1.jpg" alt="Image Alt" />
  <img src="2.jpg" alt="Image Alt" />
  <img src="3.jpg" alt="Image Alt" />
  <img src="4.jpg" alt="Image Alt" />
  <img src="5.jpg" alt="Image Alt" />
  ...
</div>

2. Load the Cube Gallery’s JavaScript at the end of the document.

<script src="dist/cube-gallery.min.js"></script>

3. Initialize the Cube Gallery on the top container and done.

new CubeGallery('gallery')

4. Specify the minimum height of the images in the gallery. Default: 100.

new CubeGallery('gallery',{
    minHeight: 150
})

5. Specify the space between images. Default: 0.

new CubeGallery('gallery',{
    margin: 5
})

Changelog:

05/28/2021

• fix(resize): prevent create when height resize