Open lightbox from url not image

[toomanylogins]

I assumed this would work but cant seem to get image to show in lightbox. I am trying to open an image from a list of urls in a datatable.

<a class=" glightbox" href="files/project/QUAD/task/QUAD-21/image-2023-07-25-10-53-51-343.png">image-2023-07-25-10-53-51-343.png</a>

The image opens in a new browser tab not the lightbox. Tried adding rel="lightbox"

Does this only work on click when you have <img src="small.jpg" alt="image" />
Do I need to use event handler or can someone please clarify if the problem is elsewhere.
Thanks

[gingerchew]

I would need a codepen or a reduced test case to help you.

[toomanylogins]

Thanks for reply. You can see problem here. Just added the cdn version to home page same result. I have tried with and without options as using the default class selector

const lightbox = GLightbox({ selector : '.glightbox' });

https://www.youdocms.com/

Click on the image "static cms" this has href

<a href="/images/cms/content_edit.png" class="glightbox"><img src="/images/cms/medium/content_edit_medium.png" srcset="" alt="content_edit_medium.png" width="500" height="292"></a>

It must be something really stupid as I am sure I had this working a while ago.

[biati-digital]

I just tried adding const lightbox = GLightbox({ selector : '.glightbox' }); and it works

CleanShot.2025-01-25.at.22.31.38.mp4

I can't check the entire site but hopefully this gives you an idea

[toomanylogins]

Thank you for taking the time to look at it. I also have it working on the local copy as you described. I was using youdocms to try and show the issue. However the problem is actually with another site where the pages are loaded via Ajax. Unfortunately I cannot provide access at moment. Will post back here when I find the issue.

[toomanylogins]

The issue was that the images were rendered in a datatable and the click event was not being attached. I added the Glightbox options after table was drawn. All working, Thanks
` initComplete: function () {

        $('.dt-paging').addClass('pt-1');

);

    lightbox = GLightbox({ selector : '.glightbox' });

    },`