All slide contents gets replaced with slide_before_load

[JacobDB]

I'm trying to use your library with custom HTML for slide contents. I've set up a hook on slide_after_load, which fetches the correct markup, and then replaces the slide's markup with that instead. This work perfectly when there's only one slide, but as soon as there are multiple, the first slide clicked on is replacing the contents of all slides. When I console.log(response), both responses are correctly output, and yet, both slides always get the same content. Additionally, when this is occurring, pagination breaks, with the following errors:

Uncaught TypeError: can't access property "offsetWidth", n is null
Uncaught TypeError: can't access property "style", i is null

What am I doing wrong?

import GLightbox from "glightbox";

const LIGHTBOX = GLightbox({
    selector: ".article--project-card > .article__link",
});

LIGHTBOX.on("slide_after_load", (data) => {
    fetch(`${data.slideConfig.href}?ajax=true`)
        .then(response => response.text())
        .then(response => {
            data.slideNode.innerHTML = `<div class='gslide-inner-content'><div class='ginner-container'><div class='gslide-custom'>${response}</div></div></div>`;
        })
        .catch(error => {
            console.error("Error:", error);
        });
});

[gingerchew]

Any chance you can give a paired down example in a Codepen or something similar. It helps us out a lot.

[JacobDB]

Sure, just threw this together, much more basic example, but the same thing seems to be happening.

https://codepen.io/JacobDB/pen/dyrpNBq

[JacobDB]

To be clear, this occurs when you open a lightwindow, then paginate to the next. If you close the lightwindow and re-open it, it does get correctly populated, so it only seems to be an issue with pagination.

[JacobDB]

This also appears to be happening when I reference an ID instead via the "inline content" documentation. I updated my example to show this.

Actually, that's working in my demo, hmm...

[JacobDB]

Aha! Apparently the class structure's the issue, I got it working like this:

import GLightbox from "glightbox";

const LIGHTBOX = GLightbox({
    selector: ".article--project-card > .article__link",
});

LIGHTBOX.on("slide_after_load", (data) => {
    fetch(`${data.slideConfig.href}?ajax=true`)
        .then(response => response.text())
        .then(html => {
            data.slideNode.innerHTML = `<div class="gslide-inner-content"><div class="ginner-container"><div class="gslide-media gslide-inline"><div class="ginlined-content">${html}</div></div></div></div>`;

        })
        .catch(error => {
            console.error("Error:", error);
        });
});