How do I get this to work? Can someone show me where I am going wrong?

[createperhaps]

Helllo,
my code where I initialize the images is as follows:

echo "<a href='" . htmlspecialchars("Drinks/$file") . "' data-toggle='lightbox' data-src='" . htmlspecialchars("Drinks/$file") . "' data-title='your-image-title' data-alt='your-image-alt-text' data-target='#lightbox' data-lightbox='myGallery' data-gallery='example-gallery'><img src='" . htmlspecialchars("Drinks/$file") . "' alt='" . htmlspecialchars("Image $counter") . "' class='w-100 shadow-1-strong rounded mb-4 img-fluid'></a>";

my script is where I am having issues. It looks like the script needs an import, and googling it tells me this is node. Is node absolutely required? The documentation says import OR "grab the latest JS from the CDN and add it after Bootstrap's JS:"

which I did.

So will document.querySelectorAll('[data-toggle="lightbox"]').forEach(el => el.addEventListener('click', Lightbox.initialize));

work without node?

edit: I seemed to have got it working eventually. l The lightbox has a background to it in class ratio.

Is there an option to customize the lightbox background colour or is this my best option? I'd rather not use important if there are settings I can pass.

.ratio {
            background-color: transparent !important;
        }

        const options = {
                keyboard: true,
                size: 'fullscreen',
                background: transparent
            };

Is anything like this an option?