Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inefficient use of space in landscape mode #661

Open
pkrasicki opened this issue Jun 13, 2019 · 2 comments
Open

Inefficient use of space in landscape mode #661

pkrasicki opened this issue Jun 13, 2019 · 2 comments

Comments

@pkrasicki
Copy link

pkrasicki commented Jun 13, 2019

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
Copy link

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
Copy link

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 :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants