Skip to content

tvoma/cube-gallery

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Cube Gallery

Cube gallery is a justified / Flickr like gallery.

Capture

Table of contents

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
}