lokesh / lightbox2

THE original Lightbox script (v2).
http://lokeshdhakar.com/projects/lightbox2/
MIT License
6.2k stars 1.77k forks source link

Inefficient use of space in landscape mode #661

Open pkrasicki opened 5 years ago

pkrasicki commented 5 years ago

What version of Lightbox2 you are using? 2.10.0 and 2.11.0

Which browsers and operating systems have you seen the issue on? Firefox, Firefox on Android

What are the steps to reproduce the bug? View Lightbox gallery on a smartphone in landscape mode.

Here is a how a gallery image would look like on a smartphone: lightbox_1 This looks good, because it uses all of the available space.

The same image in landscape mode looks like this: lightbox_2 You can see there is a lot of unused empty space around the image, which makes viewing annoying on smartphones. For small resolutions that empty space should be removed to allow images to be bigger.

lightbox_21

Jakob-KH commented 4 years ago

I have just noticed this issue too while optimizing my website so it would work on mobile as well.

In portrait mode the images' width scale nicely to the edge of the screen, but in portrait mode it is as if the images scale to a specific height (and not that large at height, either). Very wide images are somewhat okay (but still have space to the left and right of them), but images who have "portrait dimensions" (tall, but not wide) become VERY small, since they are only scaled to a specific height, not to a specific width.

I realize that if you scale to a specific width, tall images could become so tall that they exit the bottom of the screen. That's okay with me. Alternatively, a place in the code where it's possible to specify the maximun (or minimum) height of the images, would be appreciated.

Jakob-KH commented 4 years ago

Added: I found a solution that works somewhat for me: In the javascript I located the line

     positionFromTop: 50,

as well as the lines

    maxImageWidth  = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20;
    maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - self.options.positionFromTop - 70;

In version 2.11.3 they are line 10650 and line 10912-10913.

I changed PositionFromTop from 50 to 20 to move the images up on the page. Then I changed the "-70" in the last line to "+10". This made the images fill out the vertical part of the screen nicely. I then checked whether a very wide image would still only scale to the edges of the screen, and this was the case.

That's good enough for me :-)