Responsive Justified Photo Gallery In JavaScript – Cube Gallery

Category: Gallery | February 9, 2021
Author: TyomaMtl
Views Total: 144 views
Official Page: Go to website
Last Update: February 9, 2021
License: MIT

Preview:

Responsive Justified Photo Gallery In JavaScript – Cube Gallery

Description:

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
})

You Might Be Interested In:


Leave a Reply