Cube Gallery

Cube gallery is a justified / Flickr like gallery.

Table of contents

• Install
  • NPM
  • CDN
  • Download
• How to use
• Responsive
• Available Options

Install

Inside a .js file, import the CubeGallery file from the source of your choice (npm, cdn or download) :

import CubeGallery from "cube-gallery-js"

Then, link your script inside your HTML page. Do not forget type="module".

<script type="module" src="myFile.js">

NPM

npm install cube-gallery-js

Then, import in your .js file.

CDN

Import https://cdn.jsdelivr.net/npm/cube-gallery-js/src/index.min.js in your .js file.

File

Download and save dist/cube-gallery.min.js in your project. Then import in your .js file.

How to use ?

new CubeGallery(selector, options?)

Example

Create a div with your images.

<div id="gallery">
    <img src="" alt="">
    <img src="" alt="">
    ...
    <a href="#">
        <img src="" alt="">
    </a>
    ...
</div>

Note that you can wrap <img> elements with a <a href="#">. <a> element has a relative position so you can put other elements with absolute position above. You also can add borders with CSS to <img> elements.

Instanciate CubeGallery.

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

Responsive

Cube Gallery is responsive by default.

Available options

Some options are available to manage your gallery.

{
    minHeight: 100 // default
    margin: 0 // default
}