Lightningbox
A small (2.2kB gzipped) and blazing fast vanilla javascript image viewer. View Demo
Install
$ npm install --save lightningbox
Usage
API
/*** Takes a selector and initialises the image-viewer for the matched element(s).* The selector needs to point to a single or multiple <a> elements.* Whenever the <a> elements are clicked the image-viewer will open.* Required <a> parameters:** href="..." => the URL of the image that will be displayed in the modal** @param*/ { // ...}
Single Image
; ;
Multiple Images
; ;
Using CDN
<!-- Stylesheet --> <!-- Javascript -->
Using NPM
The lightningbox
module exposes the lightningbox()
function only which you can start using right away.
; ;
Styling
You can either use the compiled lightningbox.min.css
file or you can require in the SASS file from
node_modules/lightningbox/src/style.scss
.
Customizable SASS variables:
$gutter // The default spacing used
$color // Text color
$font-family // Font family
$background // Background color of the modal
$nav-background // Background color of the close button
$pagination-background // Background color of the pagination
$border-radius: // Default border radius
$transition-time: // Default transition times
CDN
Just use the following code to make window.lightningbox
available on your site.
Development
# Run webpack-dev-server and example page on http://localhost:8080/ $ yarn dev # Run a production build $ yarn build # Run the tests $ yarn test # Play some TDD! $ yarn tdd