Responsive Justified Photo Gallery In JavaScript – Cube Gallery

Category: Gallery | May 28, 2021
Author: TyomaMtl
Views Total: 131 views
Official Page: Go to website
Last Update: May 28, 2021
License: MIT


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" />

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



  • fix(resize): prevent create when height resize

You Might Be Interested In:

Leave a Reply