# cube-gallery-js

> Mansory justified gallery

Latest version **1.1.5** (published 2026-09-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install cube-gallery-js
pnpm add cube-gallery-js
yarn add cube-gallery-js
bun add cube-gallery-js
```

## Health

**Score 60/100 (C)** — status: active.

Positive: no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2026-09-22 |
| First published | 2021-07-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| Author | tvoma |
| Maintainers | tyoma |

## Links

- npm: https://www.npmjs.com/package/cube-gallery-js
- Repository: https://github.com/tvoma/cube-gallery
- Homepage: https://github.com/tvoma/cube-gallery#readme
- Issues: https://github.com/tvoma/cube-gallery/issues
- npm.io page: https://npm.io/package/cube-gallery-js

## Recent versions

- 1.1.5 (latest) — 2026-09-22
- 1.1.2 — 2026-09-21
- 1.1.1 — 2026-09-21
- 1.0.2 — 2026-09-04
- 1.0.1 — 2026-08-31
- 1.0.0 — 2021-07-14
- 0.0.1 — 2021-07-06

## README

# Cube Gallery

Cube gallery is a justified / Flickr like gallery.

![Capture](docs/images/capture.png)

## Table of contents
- [Install](#install)
    - [NPM](#npm)
    - [CDN](#cdn)
    - [Download](#download)
- [How to use](#how-to-use)
- [Responsive](#responsive)
- [Available Options](#available-options)

## Install

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

```js
import CubeGallery from "cube-gallery-js"
```

Then, link your script inside your HTML page. Do not forget `type="module"`.
```html
<script type="module" src="myFile.js">
```

### NPM

```bash
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 ?

```js
new CubeGallery(selector, options?)
```

#### Example

Create a `div` with your images.
```html
<div id="gallery">
    <img src="" alt="">
    <img src="" alt="">
    ...
    <button type="button">
        <img src="" alt="">
    </button>
    ...
    <a href="#">
        <img src="" alt="">
    </a>
    ...
</div>
```
> Note that you can wrap `<img>` elements with a `<a href="#">` or `<button>` element. `<a>` and `<button>` 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_.
```js
new CubeGallery('gallery', {
    minHeight: 150
})
```

## Responsive

Cube Gallery is responsive by default.

## Available options

Some options are available to manage your gallery.
```js
{
    minHeight: 100 // default
    margin: 0 // default
}
```

---
_Source: https://npm.io/package/cube-gallery-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._