Lightbox does not work on Owl Carousel's Clone Item Or Loop True.

[samratislamtushar]

Hi,

I use lightbox plugin called "LightGallery" in Owl Carousel. It works well but there is one problem. When i use "loop: true", it will not recognize cloned item.

See an example to better understand what I mean: https://codepen.io/anon/pen/oyOBvz Try to click back ("Prev" navigation) once and then click on the image, it opens the image file not a lightbox.

I hope somebody can help me with that.
Thanks.

[gingerchew]

Sorry you're asking for help debugging a different lightbox?

[samratislamtushar]

Your glightbox plugin. It works well but there is one problem. When i use "loop: true", it will not recognize cloned item on Owl Carousel.

[gingerchew]

That's correct.

The loop feature of most carousels involves creating temp/fake slides to act as a buffer. GLightbox doesn't update on DOM changes, so it ends up not knowing about these temp/fake slides. You can trigger GLightbox manually with something like:

// This is probably not correct but just to give you an idea
document.addEventListener('click', ({ target }) => {
	if (!target.closest(myGlightboxSelector)) return;

    lightbox.openAt(/* get the target index somehow */);
});

Or initialize owl carousel first, then initialize GLightbox.