How to init Lighbox while using min.bundle.js

[rajeshpv]

The document describes for es6 import way as follows:

import Lightbox from 'bs5-lightbox'

document.querySelectorAll('.my-lightbox-toggle').forEach((el) => el.addEventListener('click', (e) => {
	e.preventDefault();
	const lightbox = new Lightbox(el);
	lightbox.show();
}));

But I am interested to load in browser directly as follows:

• and when I do as follows the ERROR says "Lightbox" not found or Refernce Error

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.bundle.min.js"></script>



$(document).ready(function () {

    document.querySelectorAll('.mytoggle').forEach((el) => el.addEventListener('click', (e) => {
        e.preventDefault();
        const lightbox = new Lightbox(el);
        lightbox.show();
    }));
});

[trvswgnr]

If you're using the bundled version in 1.7.11 then the Lightbox class gets added to window.bootstrap so just replace Lightbox with bootstrap.Lightbox. However, this has been changed in v1.8.0 and the Lightbox class is available directly when using the bundled/CDN version.

Also heads up, you can use the Lightbox's initialize method for brevity like so:

document.querySelectorAll('.mytoggle').forEach((el) => el.addEventListener('click', Lightbox.initialize));