Author: | konfer-be |
---|---|
Views Total: | 650 views |
Official Page: | Go to website |
Last Update: | February 5, 2019 |
License: | MIT |
Preview:

Description:
kbox is a lightweight JavaScript image lightbox plugin used to open and display larger images in a responsive gallery modal.
Features:
- Multiple languages: de, en, es, fr, it, nl, pl, ru.
- Allows the users to switch between images in the modal.
- Keyboard interactions.
- Performant animations based on velocity.js.
- Image captions and counters.
How to use it:
Install & download.
# Yarn $ yarn add kbox # NPM $ npm install kbox --save
Import the kbox.js plugin’s files into the html document.
<link href="./css/kbox.min.css" rel="stylesheet"> <script src="./js/kbox.pack.min.js"></script>
Insert a thumbnail image into the document.
<img src="thumb-1.jpg" alt="Image Caption 1">
Wrap the image into a link and specify the path to the large image in the href
attribute.
<a class="kbox" data-kbox="demo" href="full-1.jpg"> <img src="thumb-1.jpg" alt="Image Caption 1"> </a>
To display multiple images in the same modal, make sure to group your images using the data-kbox
attribute:
<a class="kbox" data-kbox="demo" href="full-1.jpg"> <img src="thumb-1.jpg" alt="Image Caption 1"> </a> <a class="kbox" data-kbox="demo" href="full-2.jpg"> <img src="thumb-2.jpg" alt="Image Caption 2"> </a> <a class="kbox" data-kbox="demo" href="full-3.jpg"> <img src="thumb-3.jpg" alt="Image Caption 3"> </a> ...
Initialize the kbox.js plugin and done.
window.kbox();
Customize the gallery modal with the following options.
window.kbox({ lang: 'fr', animationSpeed: 500, keyboard: true, titles: true });
Callback functions available.
window.kbox({ afterOpening : function(e) {}, afterTransition: function(e) {}, afterClosing: function(e) {}, });