POPLIGHT
A small and simple lightbox module built for both handlebars and static templating. No ugly pre styles included which means it's totally up to you to customize!
Demo
You can find a working demo here
Build status
Install
$ npm install poplight
with yarn
$ yarn add poplight
Initiate lightbox
Create a new lightbox by calling the module constructor. The constructor takes two parameters. The initiation will generate a new element to the DOM which can be styled just the way you want.
- Target element. A DOM element which will serve as the click handler for the "open lightbox" event.
- Options. See documentation below.
const lightbox = document {}
Usage
const targetElement = document; const options = template: `<div class="lightbox"> <h1> POP! </h1> </div>` lightboxSelectorClose: '.button--close' { console } targetElement options;
Note: The target element can also be null. If null, use the poplight.open() function to trigger the lightbox.
Usage with handlebars
Handlebars template
const targetElement = document; const template = document; const compiledTemplate = Handlebars; const options = template: compiledTemplate data: name: 'Elina' handlebars: true targetElement options;
Asynchronous example
Handlebars template. Note: Handlebars must be included in project. Download here
Get post!
; const button = document; const template = document; const compiledTemplate = Handlebars; button
Options
property | type | default |
---|---|---|
element | string | div |
selectorClose | string | [data-lb-close] |
lightboxSelector | string | lightbox |
lightboxActiveClass | string | lightbox--active |
lightboxSelectorVariant | string | '' |
template | function/string (depending on template style) | hello |
handlebars | boolean | false |
data | object | {} |
async | boolean | false |
api | string | '' |
method | string | 'GET' |
body | string | '' |
onLoadCallback | function | () => {} |
API
Open: poplight.open()
Close: poplight.close()