avalonbox

A simple lightbox solution in vanilla JS.

Install

Install the package

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

Get the CSS file from dist OR from the github CDN OR

Since the component was developed using Sass you could integrate with your code in case you are using Sass.

Usage

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

Examples

HTML sample code:

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

Development

Clone the repository and move to the directory:

git clone https://github.com/Nefla/avalonbox.git
cd avalonbox

Install the dependencies and run build:

npm install
npm build

Finally, run npm start:

npm start

Third-party resources

(CC BY 3.0 US) Navigation icons

License

MIT.