Avalonbox

What is it?

Avalonbox is an implementation of the popular Lightbox component using pure JavaScript.

Installation

1. Install using npm.

npm install https://github.com/Nefla/avalonbox

2. Get the CSS file from dist OR
3. Integrate Sass file from src/styles

Getting started

Import avalonbox and call run passing an id of the gallery container.

import avalonbox from 'avalonbox'
avalonbox.run('image-gallery')

HTML sample

Here's what a sample HTML code of an image gallery should look like:

<div id="image-gallery" class="gallery">
  <a href="images/image_1.jpg">
    <img src="images/thumb_image_1.jpg" />
  </a>
  <a href="images/image_2.jpg">
    <img src="images/thumb_image_2.jpg" />
  </a>
  <a href="images/image_3.jpg">
    <img src="images/thumb_image_3.jpg" />
  </a>
</div>

Notes:

• The href attribute in the link element should pointto the image to display.
• You usually display a thumbnail image (smaller version) insteadof the original smage scaled down because it's faster to load.

Examples

Single image:

Gallery with a single element.

Multiple images:

The most common case is when you have multiple images to display.
An example with eight images:

Different aspect ratios:

The cool thing is that you can have images with different aspect ratios.