Vanilla JavaScript Responsive Image Lightbox Library – Avalonbox

Avalonbox is a simple yet robust image lightbox library that supports fullscreen gallery lightbox mode and arbitrary images with different aspect ratios.

Basic usage:

To use this library, first you have to load the following files into your web project.

<link rel="stylesheet" href="avalonbox.css">
<script src="avalonbox.jss"></script>

And then Insert your image(s) into a DIV container as follow:

<div id="image-gallery" class="gallery">
  <a href="1.jpg">
    <img src="thumb_1.jpg" />
  </a>
  <a href="2.jpg">
    <img src="thumb_2.jpg" />
  </a>
  <a href="3.jpg">
    <img src="thumb_3.jpg" />
  </a>
  ...
</div>

Changelog:

09/14/2018

• Update