Glightbox does not load

[CaptDedEyes]

Describe the bug
Despite plugging in the basic offline HTML code pieces into my site and a basic example of a code string for an image, Glightbox is still not working.

Are you able to reproduce the bug in the demo site
No.

To Reproduce
Steps to reproduce the behavior:

1. Insert <link rel="stylesheet" href="css/glightbox.css" /> and <script src="js/glightbox.min.js"></script> (Both of these pieces link to the folders that I placed the CSS & JS files in)
2. Insert a code example of an image. In my case it was <a href="img/img.jpg" class="glightbox"><img src="img/img.jpg" alt="image" /></a> and that too is properly sourced to the image folder.
3. Test the lightbox by clicking on the corresponding image when viewing the website, only to be taken thru a direct link to the image itself.

Expected behavior
I'm expected to see SOMETHING related to the lightbox appearing, but instead, I'm just taken to a direct link of the image itself.

Desktop:

• OS: Windows 10
• Browser Firefox
• Version 124.0.1 (64-bit)

[gingerchew]

Do you have any code that looks like this?

const gl = GLightbox();

GLightbox doesn't auto initialize, you still need to call the function.

[CaptDedEyes]

No, actually. Where is that supposed to go? HTML, JS, CSS? Or some different file that I don't have yet?

[gingerchew]

it should go in a js file or script tag on the page after the GLightbox script is loaded.

[CaptDedEyes]

Okay, I implemented the code into my HTML files as a <script> and it works superbly! I didn't think I needed it since I had no intention of using a CDN or ES module, so thanks for the tip!

[Lefthandmedia]

Can i check if Glightbox is allready loaded by testing if window.glightbox exists?
I mean before it has been initialised?

[gingerchew]

I don't think GLightbox installs itself on the window object. You should probably be using ESM anyways,

import GLightbox from 'path/to/glightbox.js';

console.assert(typeof GLightbox === 'undefined') // false

[Lefthandmedia]

Hi Ginger,
Thanks for answering.
so i am using ESM, in a web-component. I'm trying to create a webcomponent my-lightbox . I load GL and then initialize.
But because this webcomponent can exist multiple times on a page i don't think it will be wise to initialise GL on every instance of the webcomponent.

So i want to be able to check if GL has been loaded, and initialised and then just add the next Hostelement of my webcomponent to GL.
I'm tryin to create a a singleton static class to manage this. so the things i need to know are

• is GL loaded?
• is GL initialised (i capture the returned object in my instance)?
• how can i add the next HTML element to my instance of GL ?

I also started this question in #496