search

ashleydw / lightbox

A lightbox gallery plugin for Bootstrap
http://ashleydw.github.io/lightbox
MIT License
1.85k stars 1.3k forks source link

vertical images should be taller #244

Open nunomira opened 7 years ago

nunomira commented 7 years ago

https://jsfiddle.net/tcwkgxh0/4/

In this example, if you click the first image, it works as expected. If you go to the second image which is a a vertical one (portrait), it should be taller, as there is some blank space left between the footer and the image itself. I believe this comes from the max-width (incorrect?) value that is being applied to .modal-dialog. .ekko-lightbox-container gets the correct height, but the image doesn't.

https://jsfiddle.net/tcwkgxh0/5/

In this example I have removed some space with css , to get bigger images. The problem still occurs, but I've also noticed some strange things: If you open an image, the footer is not right at the bottom, therefore the image is even smaller. But if you navigate to the previous or next image, this will be ok, and then if you go back to the initial one, the footer is placed correctly as well.

ashleydw commented 7 years ago

Yea this looks like the ratio of the height for the container isn't being correctly calculated

jiinus commented 7 years ago

The side paddings seem to be included in the width when calculating the width/height -ratio when the image is taller than the available browser height and causes the ratio to be a bit off when calculating the maximum width by the maxHeight.

A quickfix could be to add var imgRatio = height / width; to the beginning of the _resize -method and replacing the content of if (height > maxHeight) clause with width = (maxHeight / imgRatio) + widthBorderAndPadding;