On the LightBox documentation and examples page, https://mdbootstrap.com/javascript/lightbox, it says the following..

1. data-size attribute should be the same as the size of the Large Image

2. Thumbnail and Large Image should have the same ratio

3. Thumbnail should be 544px wide

4. Large image shouldn't be wider than 1800px

The reason for this is because when you click on the thumbnail to expand it to larger image, the thumbnail transitions width to height to larger image. Hence Why the aspect ratio must be the same. If the aspect ratio is off or the image is too large. The transition becomes jumpy/choppy.

In my use case, I have users uploading images and creating a thumbnail for the image (16:9 aspect ratio). The original image is the "large" image and "thumbnail" is the generated 16:9 image. The large/original image must be the original width height and aspect ratio and I can not alter it. I can not comply with the strict rules of the lightbox.

Is there a way to disable the transition and display black box or loading icon, or something smoother and the jumpy image?

I have recorded the behavior below in the video posted, it will remain for 24 hours. Please ask for re-upload if it is deleted. Using temp file hosting for it. (no need to download, it will play in browser).

First thumbnail is normail behavior when aspect ratio is the same, second thumbnail is choppy behavior when aspect ratios and width greater than 1800px.

https://a.uguu.se/aXvZSi2VHwVd.webm