1. Getting started

Create a lightbox

Step 1

import Lightbox from '@novembrecom/nlightbox';

// Default style
import '@novembrecom/nlightbox/src/assets/themes/default/sass/index.scss';

const myLightboxConfig = { 
    uid: 'lightbox-1',
    // etc ...
};

// Basic code required to create a lightbox

const lightbox = new Lightbox(myLightboxConfig);
lightbox.init();

You can find all the optional parameters here.

Step 2

There is two way to let the lightbox recognize an element

1. Via an HTML attribute

Directly add the data attribute data-lightbox to register the element with the element's info encoded in JSON. In this example when you click on the button the lightbox will open and display the image

<button data-lightbox='{ "group": "lightbox-1", "type": "image", "src": "https://2images.pexels.com/photos/374710/pexels-photo-374710.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260", "alt": "" }'>Click me</button>

2. Or with JavaScript after init

You can fetch your data or directly input it to the lightbox object. Note that in this case, you can specify an optional target element which will have a click listener attached to it.

const myJson = `[
    { "target": "#test1", "group": "lightbox-2", "type": "youtube", "src": "https://www.youtube.com/watch?v=QwUq8xM_8bY", "autoplay": true, "start": 120, "rel": false, "showinfo": false, "controls": true, "allowFullscreen": false },
    { "target": "#test2", "group": "lightbox-2", "type": "youtube", "src": "https://www.youtube.com/watch?v=9rIy0xY99a0", "autoplay": false, "rel": false, "showinfo": false, "controls": true, "allowFullscreen": false },
]`;

lightbox.feed(myJson);