Topic: LightBox, choppy behavior when aspect ratio is different. Can i disable transition?

mirnesc92 pro asked 6 years ago


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


Mikołaj Smoleński staff answered 6 years ago


Hi, Unfortunately our ligthbox gallery has some restrictions. If You want to use images with different aspect ratrio, I suggest to try one of the following jQuery gallery plugins: http://brutaldesign.github.io/swipebox/#try http://simplelightbox.com/ http://sachinchoolur.github.io/lightGallery/ Regards

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags