Obvious install with bower (deprecated)
$ bower install kbox --save
Also with yarn
$ yarn add kbox --save
Or with npm
$ npm install kbox --save
In your HTML page, between <head> tags, import CSS code from css/kbox.css
<link href="css/kbox.css" rel="stylesheet" type="text/css" media="screen" />
Next, import Javascript file js/kbox.pack.min.js (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>
Finally, initialize the plugin at DOM ready :
kbox({});
Kbox uses velocity.js to display progressive animations. If you have already linked velocity.js in your project, import the kbox.min.js file instead of kbox.pack.min.js.
Kbox uses also hody-icons font icon, packaged into the project.
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 !
| Parameter | Type | Definition | Values | Default |
|---|---|---|---|---|
| lang | string | Catalog lang to use | 'fr'|'en'|'de'|'es'|'it'|'nl'|'pl'|'ru' | 'fr' |
| animationSpeed | int | Animation speed to transitions between each image | * | 750 |
| keyboard | boolean | Allow the keyboard navigation into modal window | true|false | true |
| titles | boolean | Display titles attributes | true|false | true |
| afterOpening | function | Callback fired after modal opening | function | function(e) { } |
| afterTransition | function | Callback fired after each image transition | function | function(e) { } |
| afterClosing | function | Callback fired after modal closing | function | function(e) { } |