7. Custom types

How to add a custom lightbox type

Step 1 : import LightboxItem class

import Lightbox from '@novembrecom/nlightbox';

Step 2 : create a new class

a. Create a new class

class LightboxItemTest { }

b. Give it a TYPE_NAME that will be used to identify your type. The type name should be unique.

LightboxItemTest.TYPE_NAME = 'test';

c. Constructor with multiple arguments

Argument	Description
lightbox	Instance of the lightbox
key	Unique key assigned to the element
dataset	All the properties specified in the data-lightbox attribute go here

constructor(lightbox, key, dataset) {
    this.lightbox = lightbox;
    this.key = key;

    this.loaded = false;
    this.loading = false;
    this.failed = false;
    this.data = null;
}

d. "Overload" the load function. You should have the following :

The load function either returns an HTML Element object, or a Promise that resolves an HTML Element if you want to perform asynchronous tasks before.

class LightboxItemTest {
    constructor(lightbox, key, dataset) {
        this.lightbox = lightbox;
        this.key = key;

        this.loaded = false;
        this.loading = false;
        this.failed = false;
        this.data = null;
        // ... 
    }
    
    /**
     * This function should return the content of your element
     * @return {Element}
     */
    load() {
        // ...
    }
}

Step 3 : register your class

const lightbox = new Lightbox({ uid: 'lightbox-1' });

// you can register multiple classes
lightbox.init([ LightboxItemTest ]);

Step 4 : use it

e. Remember we specified a type name which is used here in the data-lightbox attribute

<button data-lightbox='{ "group": "lightbox-1", "type": "test", ... }'></button>