Vanilla image modal gallery

Simple image modal gallery pure vanilla.js.

> Demo

https://fabrik.konfer.be/kbox/

Github page

https://steve-lebleu.github.io/kbox/

> Install

> $ npm install kbox --save

> How to use ?

In your HTML page, between tags, retrieve styles:

<link href="css/kbox.css" rel="stylesheet" type="text/css" media="screen" />

And link kbox pack script (contains velocity.js and kbox.js as packaged solution) :

<script type="text/javascript" src="js/kbox.pack.min.js"></script>

Puts the kbox class on the links where you will place your images, and replace data attributes values with your own values :

<a class="kbox" data-kbox="Travels"> <img src="url-to-your-img.jpg" alt="" /> <a>

Note the data-kbox attribute, which determine the gallery collection of the picture.

An then, invoke the plugin :

window.kbox();

> I18n

Kbox display interface text contents in the following languages : french, english, dutch, german, italian, spanish, polish and russian.

If your language is not supported, create your own locale file and do a pull request !

> Dependencies

Kbox uses velocity.js to display progressive animations.

Kbox uses also hody-icons font icon, packaged into the project.

> Options

Following options are available :

• lang: string, lang catalog to use
• animationSpeed: int, speed of the transition animation (ms)
• keyboard: boolean, using keyboard navigation
• titles: boolean, display titles attributes
• afterOpening: function(e), function, callback fired after modal opening
• afterTransition: function(e), function, callback fired after image display transition
• afterClosing: function(e), function, callback fired after modal closing

> Licence

GPL