Race condition between transition and interaction causes broken rendering

[Prinzhorn]

Thanks for making this library, it was very easy to integrate. However, I immediately ran into the following bug:

Describe the bug

When you hit the "right arrow key" to navigate to the next image while the first image is still in the opening transition, everything falls apart.

Are you able to reproduce the bug in the demo site

Yes

To Reproduce

Steps to reproduce the behavior:

1. Go to https://biati-digital.github.io/glightbox/
2. Click on the first image
3. Instantly "right arrow key" while the image is opening (it is tricky to always repro, see video)

Expected behavior

Either the keyboard navigation is ignored or it transitions to the second image

Screenshots

Screencast.from.2024-09-09.10-37-16.webm

Desktop:

Latest Firefox and Chromium on Ubuntu. I don't think this is a browser bug.

[ctt360]

This also happens for me when I create a slideshow with several iframe slides and press the right arrow key (or click the right arrow button with the cursor) in quick succession.

First, create the slideshow using the 'href' attribute:

elements.push({
  href: 'https://example.com/',
  height: '80vh',
  width: '80vw'
});

// add 10-20 more slides like this

Then open the slideshow and click the right arrow button several times in quick succession. You should see something like this:

When using local html files instead of example.com, I can even get something like this: